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
import { Button } from '@rothko-ui/ui';
With Kind
- Example
- Code
Appearance
- Example
- Code
Variant
- 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 appearance | Type 'filled' | 'outline' | Default filled | Description The appearance style of the button. |
Name className | Type string | Default | Description The class name for styling purposes. |
Name disabled | Type boolean | Default | Description Whether the button is disabled. |
Name fitContent | Type boolean | Default | Description Whether the button should fit its content. |
Name id | Type string | Default | Description Unique identifier for the button. |
Name kind | Type RothkoKind | Default primary | Description The kind of button. |
Name loading | Type boolean | Default | Description Whether the button is in a loading state. |
Name onClick | Type (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Default | Description The click event handler. |
Name onKeyDown | Type (e: React.KeyboardEvent<HTMLButtonElement>) => void | Default | Description The keydown event handler. |
Name role | Type React.AriaRole | Default button | Description The role of the button. |
Name size | Type RothkoSize | Default m | Description The size of the button. |
Name style | Type React.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 'square' | 'pill' | 'default' | Default default | Description The variant of the button. |