Component · Actions
Icon button
a compact, icon-only action. always give it a label for assistive tech.
Example
Playground
variant
disabled
loading
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <IconButton> | @design-foundry/lucent-react |
| Angular | <lucent-icon-button> | @design-foundry/lucent |
| Web Components | <lucent-icon-button> | @design-foundry/lucent-wc |
| Blazor | <LucentIconButton> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| icon | string | — | Material Icons ligature. |
| variant | primary | secondary | ghost | danger | … | primary | visual emphasis. |
| size | sm | md | lg | md | control density. |
| label | string | — | accessible name (required). |