Button
The most used component for interacting with a page.
Default
Use default buttons for standard actions that aren't the primary action for a page or container. They are styled with subtle borders and neutral background states.
Preparing environment...
svelte
svelte
<Button appearance="default">Default button</Button>Primary
Use primary buttons to highlight the main call to action on a page. Only one primary button should be visible in a section.
Preparing environment...
svelte
svelte
<Button appearance="primary">Primary button</Button>Subtle
?
Preparing environment...
svelte
svelte
<Button appearance="subtle">Subtle button</Button>Warning
?
Preparing environment...
svelte
svelte
<Button appearance="warning">Warning button</Button>Danger
?
Preparing environment...
svelte
svelte
<Button appearance="danger">Danger button</Button>Discover
?
Preparing environment...
svelte
svelte
<Button appearance="discover">Discover button</Button>Loading
?
Preparing environment...
svelte
svelte
<Button appearance="primary" loading>Submitting...</Button>Selected
?
Preparing environment...
svelte
svelte
<Button selected>Selected button</Button>Stretch width
?
Preparing environment...
svelte
svelte
<Button stretchwidth>Stretched button</Button>Icon before
?
Preparing environment...
svelte
svelte
<Button iconbefore="star">Icon before button</Button>Icon after
?
Preparing environment...
svelte
svelte
<Button iconafter="star">Icon after button</Button>