Icon buttons
Types
Icon button
Copy Code
<IconButton><Icon>check</Icon></IconButton>
<IconButton disabled><Icon>check</Icon></IconButton>
Filled icon button
Copy Code
<IconButton variant="filled"><Icon>check</Icon></IconButton>
<IconButton variant="filled" disabled><Icon>check</Icon></IconButton>
Tonal icon button
Copy Code
<IconButton aria-label="Tonal Icon Button" variant="tonal"><Icon>check</Icon></IconButton>
<IconButton aria-label="Disabled Tonal Icon Button" variant="tonal" disabled>
<Icon>check</Icon>
</IconButton>
Outlined icon button
Copy Code
<IconButton variant="outlined"><Icon>check</Icon></IconButton>
<IconButton variant="outlined" disabled><Icon>check</Icon></IconButton>
Size
Copy Code
<IconButton aria-label="Extra small" size="xs"><Icon>add</Icon></IconButton>
<IconButton aria-label="Small" size="s"><Icon>add</Icon></IconButton>
<IconButton aria-label="Medium" size="m"><Icon>add</Icon></IconButton>
<IconButton aria-label="Large" size="l"><Icon>add</Icon></IconButton>
<IconButton aria-label="Extra large" size="xl"><Icon>add</Icon></IconButton>
Toggle
Copy Code
{#snippet selectedIcon()}
<Icon>check</Icon>
{/snippet}
<div>
<IconButton {selectedIcon} toggle><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="filled" toggle><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="tonal" toggle><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="outlined" toggle><Icon>close</Icon></IconButton>
</div>
<div>
<IconButton {selectedIcon} toggle selected><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="filled" toggle selected><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="tonal" toggle selected><Icon>close</Icon></IconButton>
<IconButton {selectedIcon} variant="outlined" toggle selected><Icon>close</Icon></IconButton>
</div>
Loading
Copy Code
<Button loading loadingAriaLabel="Loading elevated" variant="elevated">Elevated</Button>
<Button loading loadingAriaLabel="Loading outlined" variant="outlined">Outlined</Button>
<Button loading loadingAriaLabel="Loading text" variant="text">Text</Button>
loadingAriaLabel
attribute is recommended
when using the loading state.
For accessibility, the Tooltip
Icon button with tooltip
Copy Code
<IconButton title="Icon button with tooltip" variant="filled"><Icon>check</Icon></IconButton>
Theming
Icon button Tokens
Token | Value |
---|---|
--np-icon-button-icon-color | --np-color-on-surface-variant |
--np-icon-button-icon-size | 1.5rem |
Icon button example
Copy Code
<IconButton
aria-label="Custom Icon Button"
--np-icon-button-icon-color="var(--np-color-tertiary)"
--np-icon-button-icon-size="32px"
>
<Icon>close</Icon>
</IconButton>
Filled icon button tokens
Token | Value |
---|---|
--np-filled-icon-button-icon-color | --np-color-on-primary |
--np-filled-icon-button-container-color | --np-color-primary |
--np-icon-button-icon-size | 1.5rem |
Filled icon button example
Copy Code
<IconButton
aria-label="Custom Filled Icon Button"
--np-filled-icon-button-container-color="var(--np-color-tertiary)"
--np-filled-icon-button-icon-color="var(--np-color-on-tertiary)"
--np-icon-button-icon-size="32px"
variant="filled"
>
<Icon>close</Icon>
</IconButton>
Tonal icon buttons tokens
Token | Default value |
---|---|
--np-tonal-icon-button-icon-color | --np-color-on-secondary-container |
--np-tonal-icon-button-container-color | --np-color-secondary-container |
--np-icon-button-icon-size | 1.5rem |
Tonal icon button example
Copy Code
<IconButton
aria-label="Custom Tonal Icon Button"
--np-tonal-icon-button-container-color="var(--np-color-tertiary-container)"
--np-tonal-icon-button-icon-color="var(--np-color-on-tertiary)"
--np-icon-button-icon-size="32px"
variant="tonal"
>
<Icon>close</Icon>
</IconButton>
Outlined icon button tokens
Token | Default value |
---|---|
--np-outlined-icon-button-outline-color | --np-color-outline |
--np-icon-button-icon-size | 1.5rem |
Outlined icon button example
Copy Code
<IconButton
aria-label="Custom Outlined Icon Button"
--np-outlined-icon-button-outline-color="var(--np-color-tertiary)"
--np-icon-button-icon-size="32px"
variant="outlined"
>
<Icon>close</Icon>
</IconButton>
API
Props
Prop | Type | Default | Description |
---|---|---|---|
variant | 'text' | 'filled' | 'outlined' | 'tonal' | 'text' | Defines the visual style of the button. |
toggle | boolean | false | Enables toggle behavior for the button. |
selected | bind:boolean | false | Indicates whether the button is selected. |
selectedIcon | Snippet | undefined | Icon to display when the button is selected. |
keepTooltipOnClick | boolean | false | Keeps the tooltip visible after clicking the button. |
disabled | boolean | false | Disables the button. |
loading | boolean | false | Sets the button to a loading state. |
loadingAriaLabel | string | undefined | undefined | Provides an accessibility label for the loading state. |
title | string | null | undefined | undefined | Tooltip text |
element | bind:HTMLElement | A reference to the root DOM element of the component. This variable is bound using bind:this , allowing direct access to the underlying HTML element for manipulation or querying within
the component's logic. | |
...attributes | HTMLButtonAttributes | HTMLAnchorAttributes | Use HTMLButtonAttributes for a plain icon button and HTMLAnchorAttributes (automatically applied when href is set) for a link icon button. |