Button
Trigger an action, or follow a link that looks like a button.
Button runs an action when pressed. Give it href and it renders a link instead. It builds on
React Aria's Button, so press, keyboard and focus behavior come from React Aria. It is a client
component and reads components.Button.defaultProps from the theme.
import Button from '@hone-ui/react/Button';Variants
<Button>Text</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="contained">Contained</Button>
<Button variant="contained" disableElevation>Flat contained</Button>Colors and sizes
<Button variant="contained" color="success">Send</Button>
<Button variant="outlined" color="error" size="small">Remove</Button>
<Button size="large">Large</Button>Icons, loading and links
<Button startIcon={<SaveIcon aria-hidden />}>Save</Button>
<Button variant="contained" loading loadingPosition="start">Saving</Button>
<Button href="/docs" target="_blank" rel="noopener">Docs</Button>A loading button ignores presses but stays focusable and sets aria-disabled. Disabled
buttons never call onClick, so you do not need to guard the handler.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text', 'outlined', 'contained' | 'text' | The visual style. |
color | 'primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit' | 'primary' | The palette color. |
size | 'small', 'medium', 'large' | 'medium' | The size. |
startIcon, endIcon | ReactNode | none | An icon before or after the label. |
fullWidth | boolean | false | Stretches to the container width. |
disabled | boolean | false | Blocks presses and dims the button. |
disableElevation | boolean | false | Removes the contained shadow. |
disableRipple | boolean | false | Turns off the Material look's press ripple. |
href | string | none | Renders an a. Also accepts target, rel and download. |
loading | boolean | false | Shows an indicator and ignores presses. |
loadingPosition | 'start', 'center', 'end' | 'center' | Where the indicator sits. |
loadingIndicator | ReactNode | spinner | Replaces the default spinner. |
onClick | (event) => void | none | Receives the real click event. |
sx, className, style, ref, children | Standard. ref points at the root element. |
Every other HTML prop of a button passes through, including type, name, value, form,
autoFocus, aria-* and data-*.
Notes
- No
componentprop,LinkComponent,focusVisibleClassNameorTouchRippleProps. - Loading uses React Aria's pending state. The button stays focusable and sets
aria-disabledinstead ofdisabled. - The Material ripple renders only while the button is pressed. The Minimal look has no ripple.
Accessibility
Text on contained and outlined buttons meets 4.5:1 contrast in both looks and both modes.
The default warning and info colors in light mode, and error in dark mode, miss that ratio.
The Material look keeps them. Icon-only buttons belong in IconButton.