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.
Import
- Global
- Single
import { Button } from '@rothko-ui/react';
Usage
With Kind
- Example
- Code
Variant
- Example
- Code
Radius
- Example
- Code
Size
- Example
- Code
Loading
- Example
- Code
Disabled
- Example
- Code
Accessory
- Example
- Code
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. |