Buttons

Types

Elevated button

<Button variant="elevated">Elevated</Button>
<Button variant="elevated" disabled>Disabled</Button>

Filled button

<Button variant="filled">Filled</Button>
<Button variant="filled" disabled>Disabled</Button>

Tonal button

<Button variant="tonal">Tonal</Button>
<Button variant="tonal" disabled>Disabled</Button>

Outlined button

<Button variant="outlined">Outlined</Button>
<Button variant="outlined" disabled>Disabled</Button>

Text button

<Button variant="text">Text</Button>
<Button variant="text" disabled>Disabled</Button>

Icon

<Button>
	{#snippet start()}
		<Icon>send</Icon>
	{/snippet}
	Send
</Button>
<Button>
	{#snippet end()}
		<Icon>open_in_new</Icon>
	{/snippet}
	Open
</Button>

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.

Size

<Button size="xs">Extra small</Button>
<Button size="s">Small</Button>
<Button size="m">Medium</Button>
<Button size="l">Large</Button>
<Button size="xl">Extra large</Button>

Toggle

<Button toggle selected variant="elevated">Elevated</Button>
<Button toggle selected variant="filled">Filled</Button>
<Button toggle selected variant="tonal">Tonal</Button>
<Button toggle selected variant="outlined">Outlined</Button>

Theming

Elevated button tokens

Token	Default value
`--np-elevated-button-container-color`	`--np-color-surface-container-low`
`--np-elevated-button-label-text-color`	`--np-color-on-primary`

Elevated button example

<Button
	variant="elevated"
	--np-elevated-button-label-text-color="var(--np-color-tertiary)"
>
	Custom button
</Button>

Filled button tokens

Token	Default value
`--np-filled-button-container-color`	`--np-color-primary`
`--np-filled-button-label-text-color`	`--np-color-on-primary`

Filled button example


	<Button
		variant="filled"
		--np-filled-button-label-text-color="var(--np-color-on-tertiary)"
		--np-filled-button-container-color="var(--np-color-tertiary)"
	>
		Custom button
	</Button>

Tonal button tokens

Token	Default value
`--np-tonal-button-container-color`	`--np-color-secondary-container`
`--np-tonal-button-label-text-color`	`--np-color-on-secondary-container`

Tonal button example

<Button
		variant="tonal"
		--np-tonal-button-label-text-color="var(--np-color-on-tertiary-fixed)"
		--np-tonal-button-container-color="var(--np-color-tertiary-fixed)"
	>
		Custom button
	</Button>

Outlined button tokens

Token	Default value
`--np-outlined-button-outline-color`	`--np-color-outline`
`--np-outlined-button-label-text-color`	`--np-color-primary`

Outlined button example

<Button
	variant="outlined"
	--np-outlined-button-label-text-color="var(--np-color-tertiary)"
>
	Custom button
</Button>

Text button tokens

Token	Default value
`--np-text-button-label-text-color`	`--np-color-primary`

Text button example

<Button
	variant="text"
	--np-text-button-label-text-color="var(--np-color-tertiary)"
>
	Custom button
</Button>

API

Attributes

Attribute	Type	Default	Description
`variant`	`'text' \| 'filled' \| 'outlined' \| 'elevated' \| 'tonal'`	`'outlined'`	Visual appearance
`start`	`Snippet \| undefined`	`undefined`	Icon at the start of the button
`end`	`Snippet \| undefined`	`undefined`	Icon at the end of 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.
`keepTooltipOnClick`	`boolean \| undefined`	`false`	Keeps the tooltip visible after the button is clicked.
`title`	`string \| null \| undefined`	`undefined`	Specifies the tooltip text.
`size`	`'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	`'s'`	Button size
`shape`	`'round' \| 'square'`	`'round'`	Button shape
`toggle`	`boolean \| undefined`	`false`	Enables toggle behavior, allowing the button to act as a toggleable (on/off) button.
`selected`	`boolean \| undefined`	`false`	Indicates whether the button is currently selected (used with toggle buttons).
`...attributes`	`HTMLButtonAttributes \| HTMLAnchorAttributes`		Use `HTMLButtonAttributes` for a plain button or `HTMLAnchorAttributes` for a link button (applied automatically when href is set).

Bindables

Attribute	Type	Description
`element`	`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.