@snack-uikit/button
v0.17.1
Published
Кнопка в различных вариациях
Downloads
1,230
Readme
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
| - | |