Icon buttons

Types

Icon button

<IconButton><Icon>check</Icon></IconButton>
<IconButton disabled><Icon>check</Icon></IconButton>

Filled icon button

<IconButton variant="filled"><Icon>check</Icon></IconButton>
<IconButton variant="filled" disabled><Icon>check</Icon></IconButton>

Tonal icon button

<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

<IconButton variant="outlined"><Icon>check</Icon></IconButton>
<IconButton variant="outlined" disabled><Icon>check</Icon></IconButton>

Size

<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

{#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

<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>

bookmark For accessibility, the loadingAriaLabel attribute is recommended when using the loading state.

Tooltip

<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

<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

<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

<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

<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.