IconButton
BetaBatch A. A square button that shows only an icon. Its label is required and appears as a tooltip.
When to use
Use for common actions in tight spaces, like close or more actions in a table row. Always give it a label.
When not to use
If the icon's meaning isn't obvious, use Button with text.
Anatomy
- Container
- Icon
- Tooltip with the label (on hover and keyboard focus)
Variants
| Property | Options | Default |
|---|---|---|
| variant | primary, secondary, tertiary | tertiary |
| tone | neutral, negative | neutral |
| pressed | Makes it a toggle. true is the selected state. | not a toggle |
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Pressed | Selected | Disabled | Loading | |
|---|---|---|---|---|---|---|---|
| primary / neutral | |||||||
| primary / negative | |||||||
| secondary / neutral | |||||||
| secondary / negative | |||||||
| tertiary / neutral | |||||||
| tertiary / negative |