Components
Icon button
Icon button
Compact icon-only button for inline affordances — edit pencils on detail cards, X close on modal headers, dropdown triggers on tables. Two semantic colours: Neutral (the default for non-destructive actions) and Danger (for delete / archive / cancel).
Canonical
Pair every icon button with aria-label — the icon alone doesn't
tell screen readers what the button does.
Variants
2 variantsNeutral
koala-icon-button="Neutral"
Danger
koala-icon-button="Danger"
Props
1 attribute| Attribute | Values | Notes |
|---|---|---|
| koala-icon-button | Neutral, Danger | Defaults to Neutral. Targets both <button> and <a> elements. |
Do & don't
Do
Always set
aria-label. The visible icon doesn't read for screen readers.
Don't
Don't use a full
koala-btn with just an icon — the padding's wrong and the visual weight competes with the page's primary action.