Icon buttons

Types

Icon button

<IconButton><CheckIcon /></IconButton>
<IconButton disabled><CheckIcon /></IconButton>

Filled icon button

<IconButton variant="filled"><CheckIcon /></IconButton>
<IconButton variant="filled" disabled><CheckIcon /></IconButton>

Tonal icon button

<IconButton variant="filled"><CheckIcon /></IconButton>
<IconButton variant="filled" disabled><CheckIcon /></IconButton>

Outlined icon button

<IconButton variant="outlined"><CheckIcon /></IconButton>
<IconButton variant="outlined" disabled><CheckIcon /></IconButton>

Toggle

{#snippet selectedIcon()}
	<CheckIcon />
{/snippet}
<div>
	<IconButton {selectedIcon} toggle><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="filled" toggle><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="tonal" toggle><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="outlined" toggle><CloseIcon /></IconButton>
</div>
<div>
	<IconButton {selectedIcon} toggle selected><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="filled" toggle selected><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="tonal" toggle selected><CloseIcon /></IconButton>
	<IconButton {selectedIcon} variant="outlined" toggle selected><CloseIcon /></IconButton>
</div>

Tooltip

<IconButton title="Icon button with tooltip" variant="filled"><CheckIcon /></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
	>
		<CloseIcon />
	</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"
>
	<CloseIcon />
</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' | 'tonal' | 'outlined''text'Button variant
togglebooleanfalseToggle button
selectedbooleanfalseSelected state
disabledbooleanfalseDisabled state
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.