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>

Size

<Button>Default: 40px</Button>
<Button --np-outlined-button-container-height="48px">Height: 48px</Button>
<Button --np-outlined-button-container-height="56px">Height: 56px</Button>

Theming

Elevated button tokens

Token	Default value
`--np-elevated-button-container-color`	`--np-color-surface-container-low`
`--np-elevated-button-container-height`	`2.5rem`
`--np-elevated-button-container-shape`	`--np-shape-corner-full`
`--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)"
	--np-elevated-button-container-shape="4px"
	--np-elevated-button-container-height="48px"
>
	Custom button
</Button>

Filled button tokens

Token	Default value
`--np-filled-button-container-color`	`--np-color-primary`
`--np-filled-button-container-height`	`2.5rem`
`--np-filled-button-container-shape`	`--np-shape-corner-full`
`--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)"
		--np-filled-button-container-shape="4px"
		--np-filled-button-container-height="48px"
	>
		Custom button
	</Button>

Tonal button tokens

Token	Default value
`--np-tonal-button-container-color`	`--np-color-secondary-container`
`--np-tonal-button-container-height`	`2.5rem`
`--np-tonal-button-container-shape`	`--np-shape-corner-full`
`--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)"
		--np-tonal-button-container-shape="4px"
		--np-tonal-button-container-height="48px"
	>
		Custom button
	</Button>

Outlined button tokens

Token	Default value
`--np-outlined-button-outline-color`	`--np-color-outline`
`--np-outlined-button-container-height`	`2.5rem`
`--np-outlined-button-container-shape`	`--np-shape-corner-full`
`--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)"
	--np-outlined-button-container-shape="4px"
	--np-outlined-button-container-height="48px"
>
	Custom button
</Button>

Text button tokens

Token	Default value
`--np-text-button-label-text-color`	`--np-color-primary`
`--np-text-button-container-height`	`2.5rem`
`--np-text-button-container-shape`	`--np-shape-corner-full`

Text button example

<Button
	variant="text"
	--np-text-button-label-text-color="var(--np-color-tertiary)"
	--np-text-button-container-shape="4px"
	--np-text-button-container-height="48px"
>
	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
`title`	`string \| null \| undefined`	`undefined`	Tooltip text
`...attributes`	`HTMLButtonAttributes \| HTMLAnchorAttributes`		Use `HTMLButtonAttributes` for a plain button and `HTMLAnchorAttributes` (automatically applied when href is set) for a link button.

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.