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 variant="filled"><Icon>check</Icon></IconButton>
<IconButton variant="filled" disabled><Icon>check</Icon></IconButton>

Outlined icon button

<IconButton variant="outlined"><Icon>check</Icon></IconButton>
<IconButton variant="outlined" disabled><Icon>check</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>

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-container-shape--np-shape-corner-full
--np-icon-button-container-height2.5rem
--np-icon-button-container-width2.5rem
--np-icon-button-icon-size1.5rem

Icon button example

<IconButton
		{selectedIcon}
		--np-icon-button-icon-color="var(--np-color-tertiary)"
		--np-icon-button-container-shape="2px"
		--np-icon-button-icon-size="48px"
		toggle
		selected
	>
		<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-filled-icon-button-container-shape--np-shape-corner-full
--np-filled-icon-button-container-height2.5rem
--np-filled-icon-button-container-width2.5rem
--np-filled-icon-button-icon-size1.5rem

Filled icon button example

<IconButton
{selectedIcon}
	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-filled-icon-button-container-shape="2px"
	--np-filled-icon-button-icon-size="48px"
	toggle
	selected
	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-tonal-icon-button-container-shape--np-shape-corner-full
--np-tonal-icon-button-container-height2.5rem
--np-tonal-icon-button-container-width2.5rem
--np-tonal-icon-button-icon-size1.5rem

Tonal icon button example

<IconButton
		{selectedIcon}
		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-tonal-icon-button-container-shape="2px"
		--np-tonal-icon-button-icon-size="48px"
		toggle
		selected
		variant="tonal"
	>

Outlined icon button tokens

TokenDefault value
--np-outlined-icon-button-outline-color--np-color-outline
--np-outlined-icon-button-container-shape--np-shape-corner-full
--np-outlined-icon-button-container-height2.5rem
--np-outlined-icon-button-container-width2.5rem
--np-outlined-icon-button-icon-size1.5rem
--np-outlined-icon-button-outline-width1px

Outlined icon button example

<IconButton
		{selectedIcon}
		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-tonal-icon-button-container-shape="2px"
		--np-tonal-icon-button-icon-size="48px"
		toggle
		selected
		variant="tonal"
	>

API

Attributes

AttributeTypeDefaultDescription
variant'text' | 'filled' | 'outlined' | 'tonal''text'Defines the visual style of the button.
togglebooleanfalseEnables toggle behavior for the button.
selectedbooleanfalseIndicates whether the button is selected.
selectedIconSnippetundefinedIcon to display when the button is selected.
keepTooltipOnClickbooleanfalseKeeps the tooltip visible after clicking the button.
disabledbooleanfalseDisables the button.
titlestring | null | undefinedundefinedTooltip text
...attributesHTMLButtonAttributes | HTMLAnchorAttributesUse HTMLButtonAttributes for a plain icon button and HTMLAnchorAttributes (automatically applied when href is set) for a link icon button.

Bindables

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