Components
IconButton
A button that holds a single icon.
IconButton is a round button for one icon. It has no text, so always give it an accessible name
with aria-label. It is a client component and reads components.IconButton.defaultProps.
import IconButton from '@hone-ui/react/IconButton';Examples
<IconButton aria-label="Add" color="primary">
<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M11 5h2v14h-2zM5 11h14v2H5z" />
</svg>
</IconButton>
<IconButton aria-label="Add" color="primary" size="large">
<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M11 5h2v14h-2zM5 11h14v2H5z" />
</svg>
</IconButton>In an app, pass an icon from your icon library:
<IconButton aria-label="Delete" onClick={remove}>
<DeleteIcon />
</IconButton>
<IconButton aria-label="Open menu" edge="start" color="inherit">
<MenuIcon />
</IconButton>
<IconButton aria-label="Add" color="primary" size="large">
<AddIcon />
</IconButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info' | 'default' | The icon color. 'default' is the neutral action color. |
size | 'small', 'medium', 'large' | 'medium' | The size. |
edge | 'start', 'end', false | false | Cancels the padding on one side so the icon lines up with nearby text. |
disabled | boolean | false | Blocks presses. |
disableRipple | boolean | false | Turns off the Material look's press ripple. |
loading | boolean | false | Replaces the icon with a spinner and ignores presses. |
onClick | (event) => void | none | Receives the real click event. |
sx, className, style, ref, children | Standard. children is the icon. |
Every other HTML prop of a button passes through.
Notes
- No
href. Use Button or a link for navigation. - No
componentprop.
Accessibility
Screen readers read aria-label, because the icon has no text. Mark the icon aria-hidden.