@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
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	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
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	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
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	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
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	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
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	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	-

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	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	-