Buttons

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

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

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

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

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

<Button>
	{#snippet start()}
		<SendIcon />
	{/snippet}
	Send
</Button>
<Button>
	{#snippet end()}
		<OpenInNewIcon />
	{/snippet}
	Open
</Button>

<Button>Small</Button>
<Button --np-outlined-button-container-height="48px">Medium</Button>
<Button --np-outlined-button-container-height="56px">Large</Button>

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

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

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

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

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