Button
Create visually appealing and interactive buttons with rothko ui's Button component. Customize styles, sizes, and behaviors to match your design vision and provide intuitive actions, making your user interfaces more engaging and user-friendly.
Usage
With Kind
Variant
Radius
Size
Loading
Disabled
Accessory
Props
| Name | Type | Default | Description |
|---|---|---|---|
Name accessoryLeft | Type Accessory | Default | Description The left accessory component. |
Name accessoryRight | Type Accessory | Default | Description The right accessory component. |
Name asIcon | Type boolean | Default | Description Display the button as an icon. |
Name className | Type string | Default | Description CSS class name(s). |
Name disabled | Type boolean | Default | Description Whether the button is disabled. |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default 'primary' | Description The button's semantic style. |
Name loading | Type boolean | Default | Description Whether the button is in a loading state. |
Name onClick | Type (e: MouseEvent) => void | Default | Description The click event handler. |
Name onKeyDown | Type (e: KeyboardEvent) => void | Default | Description The keydown event handler. |
Name radius | Type 'none' | 'default' | 'full' | Default 'default' | Description The radius of the button. |
Name role | Type AriaRole | Default 'button' | Description The role of the button. |
Name size | Type 'xs' | 's' | 'm' | 'l' | Default 'm' | Description The size of the button. |
Name style | Type CSSProperties | Default | Description The inline style for the button. |
Name tabIndex | Type number | Default | Description The tab index of the button. |
Name type | Type 'button' | 'submit' | 'reset' | Default 'button' | Description The type of the button. |
Name variant | Type 'filled' | 'outline' | Default 'filled' | Description The variant of the button. |