@snack-uikit/button NPM

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
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
label	`string`	-	Текст кнопки
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
appearance	enum Appearance: `"primary"`, `"neutral"`, `"destructive"`	primary	Внешний вид кнопки
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
fullWidth	`boolean`	-	Сделать кнопку во всю ширину
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-

ButtonSimple

Props

name	type	default value	description
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
label	`string`	-	Текст кнопки
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
appearance	enum Appearance: `"primary"`, `"neutral"`, `"destructive"`	neutral	Внешний вид кнопки
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
fullWidth	`boolean`	-	Сделать кнопку во всю ширину
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-

ButtonOutline

Props

name	type	default value	description
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
label	`string`	-	Текст кнопки
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
appearance	enum Appearance: `"primary"`, `"neutral"`, `"destructive"`	primary	Внешний вид кнопки
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
fullWidth	`boolean`	-	Сделать кнопку во всю ширину
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-

ButtonTonal

Props

name	type	default value	description
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
label	`string`	-	Текст кнопки
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
appearance	enum Appearance: `"primary"`, `"neutral"`, `"destructive"`	primary	Внешний вид кнопки
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
fullWidth	`boolean`	-	Сделать кнопку во всю ширину
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-

ButtonFunction

Props

name	type	default value	description
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
iconPosition	enum IconPosition: `"before"`, `"after"`	after	Позиция иконки
label	`string`	-	Текст кнопки
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
appearance	enum Appearance: `"primary"`, `"neutral"`, `"destructive"`	neutral	Внешний вид кнопки
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
fullWidth	`boolean`	-	Сделать кнопку во всю ширину
counter	`CounterInButtonProps`	-	Пропсы каунтера в кнопке
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-

ButtonElevated

Props

name	type	default value	description
href	`string`	-	Ссылка
target	`HTMLAttributeAnchorTarget`	_blank	HTML-аттрибут target
className	`string`	-	CSS-класс
disabled	`boolean`	-	Флаг неактивности компонента
icon	`ReactElement`	-	Иконка
loading	`boolean`	-	Флаг состояния загрузки
onClick	`MouseEventHandler<HTMLElement>`	-	Колбек обработки клика
onKeyDown	`KeyboardEventHandler<HTMLElement>`	-	Колбек обработки нажатия клавиши
onFocus	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки фокуса
onBlur	`FocusEventHandler<HTMLButtonElement \\| HTMLAnchorElement>`	-	Колбек обработки блюра
type	"submit" \| "reset" \| "button"	button	HTML-аттрибут type
tabIndex	`number`	-	HTML-аттрибут tab-index
size	enum Size: `"xs"`, `"s"`, `"m"`, `"l"`	s	Размер
ref	`Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	`Key`	-