@snack-uikit/button

Button

Installation

npm i @snack-uikit/button

TODO

• Add transition/animation
• Fix onClick type (button & anchor)
• R&D two icons in a button
• R&D type prop

Example

import { ButtonFilled, ButtonFunction, ButtonSimple } from "@snack-uikit/button";
import { Counter } from "@snack-uikit/counter";
import { DaySVG } from "@snack-uikit/icons";

<ButtonFilled
  label='Navigate'
  onClick={() => navigate()}
  icon={<DaySVG />}
  size='m'
  appearance='primary'
  href='https://cloud.ru/'
  target='_blank'
  disabled={true}
  loading={true}
/>

<ButtonSimple
  label='Submit'
  onClick={() => sendForm()}
/>

const CounterProps = { 
  value: 7, 
  appearance: 'red',
}

<ButtonFunction
  label='Unread Messages'
  onClick={() => openMessages()}
  counter={CounterProps}
/>

ButtonFilled

Props

name	type	default value	description
ref	LegacyRef<HTMLButtonElement | HTMLAnchorElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-

ButtonSimple

Props

name	type	default value	description
ref	LegacyRef<HTMLButtonElement | HTMLAnchorElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-

ButtonOutline

Props

name	type	default value	description
ref	LegacyRef<HTMLButtonElement | HTMLAnchorElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-

ButtonTonal

Props

name	type	default value	description
ref	LegacyRef<HTMLButtonElement | HTMLAnchorElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-

ButtonFunction

Props

name	type	default value	description

ButtonElevated

Props

name	type	default value	description
ref	LegacyRef<HTMLButtonElement | HTMLAnchorElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-