Emphasis
Size
Button
A direct action with clear emphasis and a predictable result.
Preview
Su uses the Quiet instrument direction. Use the mode switcher above to see light and dark.
Usage
- Use primary for the main action in a group. Use secondary or quiet for supporting actions.
- Name the result of the action in the label, such as “Save changes”.
API
| Prop | Values | Default |
|---|---|---|
| variant | primary | secondary | quiet | primary |
| size | small | default | large | default |
| type | button | submit | reset | button |
| disabled | boolean | false |
Example
import { Button } from '@zao/react';
<Button variant="secondary">Review details</Button>Accessibility
Button uses a native button through Base UI. It is keyboard operable, has a visible focus outline, and skips the tab order when disabled.