Button
Button (Atom) — props and states.
| No. | Key | Type | Values | Description |
|---|
| 1 | variant | enum | primary, secondary, ghost, link | Visual style of the button. |
| 2 | size | enum | sm, md, lg | Button size. |
| 3 | disabled | boolean | true, false | Disables interaction and dims the button. |
| 4 | loading | boolean | true, false | Shows a spinner and blocks interaction. |
| 5 | leftIcon | ReactNode | — | Icon rendered before the label. |
| 6 | rightIcon | ReactNode | — | Icon rendered after the label. |
| 7 | fullWidth | boolean | true, false | Stretches the button to the container width. |
| 8 | type | enum | button, submit, reset | Native HTML button type. |
| 9 | onClick | function | (event) => void | Click handler. |
| 10 | children | ReactNode | — | Button label / content. |
| No. | Key | Type | Values | Description |
|---|
| 1 | default | visual | — | Resting state. |
| 2 | hover | visual | — | Pointer is over the button. |
| 3 | active | visual | — | Button is being pressed. |
| 4 | focus | visual | — | Has keyboard focus (visible focus ring). |
| 5 | disabled | visual | — | Non-interactive and dimmed. |
| 6 | loading | visual | — | Spinner shown; non-interactive. |