Components
IconButton
Icon-only button without a background, with an optional on/off toggle
Overview
IconButton is a button that shows only an icon. Use it where buttons sit side by side, such as a text formatting toolbar or timer controls. Its hover, pressed and on colors belong to the component, so every icon button looks the same.
Because there is no visible text, aria-label is required. It is the name screen readers announce.
Basic
Toggle
Pass aria-pressed to make it an on/off button. When it is true, the button shows the on color and screen readers announce it as pressed.
Disabled
Pass disabled to turn it off. The icon switches to the disabled color, even if you gave the Icon its own color, so a disabled button never looks clickable.
Sizes
- md: Default. Text formatting toolbar
- sm: Smaller padding. Timer controls next to a log
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
size | 'sm' | 'md' | 'md' | No | Padding size. sm for timer controls, md for the formatting toolbar |
aria-label | string | - | Yes | Accessible name. Required because the button shows only an icon |
aria-pressed | boolean | - | No | Makes it a toggle button. true shows the on color |
disabled | boolean | false | No | Disabled. No hover or pressed color |
type | 'button' | 'submit' | 'reset' | 'button' | No | Button type. Defaults to button, so it does not submit a form |
onClick | MouseEventHandler<HTMLButtonElement> | - | No | Click handler |
children | ReactNode | - | Yes | Icon |
className | string | - | No | Extra CSS class |
ref | Ref<HTMLButtonElement> | - | No | Ref to the button element |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | borderRadius | $size.radius.200 |
| enabled | root | backgroundColor | transparent토큰 아님 — button without a background |
| hover | root | backgroundColor | $color.background.default.defaultHover |
| pressed | root | backgroundColor | $color.background.default.defaultPressed |
| selected | root | backgroundColor | $color.background.default.defaultHover |
| disabled | icon | color | $color.icon.disabled.default |
size=sm
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | padding | $size.space.100 |
size=md
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | padding | $size.space.150 |
Usage Guidelines
Do
- Always give
aria-labela short action name, such as Start or Bold - Use
aria-pressedfor buttons that stay on, instead of changing the color yourself
Don't
- Don't build a clickable icon from Box, Inline or Stack. They have no hover, pressed or on styles
- Don't use IconButton for the main action of a screen. Use Button