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

Token	Value
`--np-icon-button-icon-color`	`--np-color-on-surface-variant`
`--np-icon-button-container-shape`	`--np-shape-corner-full`
`--np-icon-button-container-height`	`2.5rem`
`--np-icon-button-container-width`	`2.5rem`
`--np-icon-button-icon-size`	`1.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

Token	Value
`--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-height`	`2.5rem`
`--np-filled-icon-button-container-width`	`2.5rem`
`--np-filled-icon-button-icon-size`	`1.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

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-tonal-icon-button-container-shape`	`--np-shape-corner-full`
`--np-tonal-icon-button-container-height`	`2.5rem`
`--np-tonal-icon-button-container-width`	`2.5rem`
`--np-tonal-icon-button-icon-size`	`1.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

Token	Default 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-height`	`2.5rem`
`--np-outlined-icon-button-container-width`	`2.5rem`
`--np-outlined-icon-button-icon-size`	`1.5rem`
`--np-outlined-icon-button-outline-width`	`1px`

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

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