Button

To trigger an operation.

Examples

Type

The following types can be used for the button: primary, default, dashed, and link.

View Code

<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="link">Link</Button>

<script>
  import { Button } from "svant";
</script>

Icons

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.

View Code

<Button type="primary" shape="circle" icon="{SearchOutlined}" />
<Button type="primary" shape="circle">A</Button>
<Button type="primary" icon="{SearchOutlined}">Search</Button>
<Button shape="circle" icon="{SearchOutlined}" />
<Button icon="{SearchOutlined}">Search</Button>

<br />

<Button shape="circle" icon="{SearchOutlined}" />
<Button icon="{SearchOutlined}">Search</Button>
<Button type="dashed" shape="circle" icon="{SearchOutlined}" />
<Button type="dashed" icon="{SearchOutlined}">Search</Button>

<script>
  import { Button } from "svant";
  import { SearchOutlined } from "svant/icons";
</script>

Size

Supports a default button size as well as a large and small size.

If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.

Large Default Small

View Code

<RadioGroup bind:value="{size}" style="{{ marginBottom: '16px' }}">
  <RadioButton value="large">Large</RadioButton>
  <RadioButton value="default">Default</RadioButton>
  <RadioButton value="small">Small</RadioButton>
</RadioGroup>
<br />
<Button type="primary" {size}>Primary</Button>
<Button {size}>Default</Button>
<Button type="dashed" {size}>Dashed</Button>
<Button type="link" {size}>Link</Button>
<br />
<Button type="primary" icon="{DownloadOutlined}" {size} />
<Button type="primary" shape="circle" icon="{DownloadOutlined}" {size} />
<Button type="primary" shape="round" icon="{DownloadOutlined}" {size} />
<Button type="primary" shape="round" icon="{DownloadOutlined}" {size}>
  Download
</Button>
<Button type="primary" icon="{DownloadOutlined}" {size}>Download</Button>

<script>
  import { Button, RadioGroup, RadioButton } from "svant";
  import { DownloadOutlined } from "svant/icons";
  let size = "default";
</script>

Disabled

To mark a button as disabled, add the disabled property to the Button.

View Code

<Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(disabled)</Button>
<br />
<Button>Default</Button>
<Button disabled>Default(disabled)</Button>
<br />
<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(disabled)</Button>
<br />
<Button type="link">Link</Button>
<Button type="link" disabled>Link(disabled)</Button>
<br />
<Button type="link" danger>Danger Link</Button>
<Button type="link" danger disabled>Danger Link(disabled)</Button>
<br />
<Button danger>Danger Default</Button>
<Button danger disabled>Danger Default(disabled)</Button>
<div class="site-button-ghost-wrapper">
  <Button ghost>Ghost</Button>
  <Button ghost disabled>Ghost(disabled)</Button>
</div>

<script>
  import { Button } from "svant";
</script>

<style>
  .site-button-ghost-wrapper {
    padding: 8px 8px 0 8px;
    background: rgb(190, 200, 200);
  }
</style>

Loading

A loading indicator can be added to a button by setting the loading property on the Button.

View Code

<Button type="primary" loading>Loading</Button>
<Button type="primary" size="small" loading>Loading</Button>
<br />
<Button
  type="primary"
  {loading}
  on:click="{() => {
    loading = true;
  }}">
  Click me!
</Button>
<Button
  type="primary"
  icon="{PoweroffOutlined}"
  loading="{iconLoading}"
  on:click="{() => {
    iconLoading = true;
  }}">
  Click me!
</Button>
<Button
  type="primary"
  loading="{loadingWithDelay}"
  on:click="{() => {
    loadingWithDelay = { delay: 2000 };
  }}">
  With 2s Delay
</Button>
<Button
  type="primary"
  on:click="{() => {
    loading = false;
    iconLoading = false;
    loadingWithDelay = null;
  }}">
  Stop Loading
</Button>

<script>
  import { Button } from "svant";
  import { PoweroffOutlined } from "svant/icons";

  let loading = false;
  let iconLoading = false;

  let loadingWithDelay;
</script>

Danger

For a red color, use the danger property.

View Code

<Button type="primary" danger>Primary</Button>
<Button danger>Default</Button>
<Button type="dashed" danger>link</Button>
<Button type="link" danger>link</Button>

<script>
  import { Button } from "svant";
</script>

Block

The block property will make the button fit to its parent width.

View Code

<Button type="primary" block>Primary</Button>
<Button block>Default</Button>
<Button type="dashed" block>Dashed</Button>
<Button type="link" block>Link</Button>

<script>
  import { Button } from "svant";
</script>

API

To get a customized button, just set type/shape/size/loading/disabled.

Attributes

Property	Description	Type	Default
disabled	The disabled state of button	Boolean	false
class	The class attribute	String \| Object	-
style	The style attribute	String \| Object	-
ghost	Makes the background transparent and inverts the text and border colors	Boolean	false
href	The url of link button	String	-
htmlType	Set the original html type of button	String	button
icon	Set the icon component of button	SvelteComponent	-
loading	Set the loading status of button	Boolean \| { delay: Number }	false
shape	Can be set to circle, round or omitted	Boolean \| { delay: Number }	false
size	Set the size of button	large \| default \| small	-
target	Same as target attribute of <a>, works when href is specified	String	-
type	Can be set to primary, ghost, dashed, link or omitted (meaning default)	String	default
block	Option to fit button width to its parent width	Boolean	false
danger	Set the danger status of button	Boolean	false

Events

Name	Description
click	Specify a function that will be called when a user clicks the button.