Icon Button
Use GdsIconButton for compact, icon-only actions where the icon meaning is clear - close, edit, search, favorite, settings.
What GDS provides
| Prop | GDS values | Notes |
|---|---|---|
color | default, primary | MUI colors (error, secondary, etc.) are not supported |
size | small, medium, large | Default is medium; controls the button hit target. Icon size comes from the icon (fontSize) |
disabled | true, false | Token-driven disabled icon color |
All other props pass through to MUI IconButton (e.g. onClick, aria-label).
Accessibility
Every GdsIconButton must include an aria-label describing the action.
import { DeleteIcon } from "@granicus/gds-core/DeleteIcon";
import { GdsIconButton } from "@granicus/gds-core/GdsIconButton";
<GdsIconButton aria-label="Delete item">
<DeleteIcon />
</GdsIconButton>Default
A basic icon button. Always include an aria-label that describes the action. Default size is medium.
Colors
Use color for default (neutral) or primary. Other MUI colors like error or secondary are not supported.
Sizes
Button size sets the hit target (small 34px, medium 40px, large 48px). Icon size is separate - set fontSize on the icon (small 16px, medium 20px, large 24px).
Button size
Icon size (fontSize)
Shown on a medium button so only the icon size changes.
Disabled
Set disabled when the action is unavailable. Disabled icon color is token-driven for both default and primary.
Props
External references
For the full and always up-to-date props, use the MUI references below.