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

TokenValue
--np-icon-button-icon-color--np-color-on-surface-variant
--np-icon-button-icon-size1.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

TokenValue
--np-filled-icon-button-icon-color--np-color-on-primary
--np-filled-icon-button-container-color--np-color-primary
--np-icon-button-icon-size1.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

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

TokenDefault value
--np-outlined-icon-button-outline-color--np-color-outline
--np-icon-button-icon-size1.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

PropTypeDefaultDescription
variant'text' | 'filled' | 'outlined' | 'tonal''text'Defines the visual style of the button.
togglebooleanfalseEnables toggle behavior for the button.
selectedbind:booleanfalseIndicates whether the button is selected.
selectedIconSnippetundefinedIcon to display when the button is selected.
keepTooltipOnClickbooleanfalseKeeps the tooltip visible after clicking the button.
disabledbooleanfalseDisables the button.
loadingbooleanfalseSets the button to a loading state.
loadingAriaLabelstring | undefinedundefinedProvides an accessibility label for the loading state.
titlestring | null | undefinedundefinedTooltip text
elementbind:HTMLElementA 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.
...attributesHTMLButtonAttributes | HTMLAnchorAttributesUse HTMLButtonAttributes for a plain icon button and HTMLAnchorAttributes (automatically applied when href is set) for a link icon button.