Appearance

Button ​

Figma

Buttons are used to initialize an action or make choices, with a single click.

Basic Usage ​

template
<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button inline>Inline</Button>

Playground ​

Tag ​

By default, this component will be rendered as a button, but you can also render an anchor by setting the href property.

I'm an anchor
template
<Button>I'm a button</Button>
<Button href="#">I'm an anchor</Button>

Icons ​

The Button component can act as a wrapper for an Icon or IconLabel component:

Icon Button ​

template
<Button icon>
  <Icon name="sort" />
</Button>

<Button icon href="#">
  <Icon name="archive" />
</Button>

IconLabel Button ​

template
<Button icon-label>
  <IconLabel icon="file" stacked>
    Download
  </IconLabel>
</Button>

Variants ​

Primary ​

template
<Button color="blue">Create</Button>
<Button color="red">Delete</Button>

Secondary ​

template
<Button secondary>Wait</Button>
<Button secondary color="red">Stop</Button>
<Button secondary color="blue">Go</Button>

Tertiary ​

template
<div class="tw-p-3 tw-bg-ice-800 tw-rounded">
  <Button tertiary>Dashboard</Button>
</div>

Inline ​

If you want to display a button inline with other content, you can use the inline property.

INFO

The color prop is ignored when the inline prop is set.

template
<Button inline>click</Button>

Disabled ​

A Button can be disabled by adding the disabled attribute.

template
<Button disabled>Disabled</Button>
<Button secondary disabled>Disabled</Button>
<Button inline disabled>Disabled</Button>

Loading ​

A Button can also be disabled by using the isLoading prop, which will display a spinning loading icon in place of the button text.

template
<Button :is-loading="isLoading" @click="onSubmit">Submit</Button>
ts
const isLoading = ref(false);

async function onSubmit() {
  if (isLoading.value) {
    return;
  }

  isLoading.value = true;

  try {
    await api.sendData();
  } finally {
    isLoading.value = false;
  }
}

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.