Buttons

Common buttons

Filled

Filled buttons have the most visual impact, and should be used for important, final actions that complete a flow.

A button component has variant="filled" as default.

<template>
  <div class="flex flex-wrap gap-4">
    <BBtn>Primary</BBtn>

    <BBtn color="secondary">
      Secondary
    </BBtn>

    <BBtn
      color="tertiary"
    >
      Tertiary
    </BBtn>

    <BBtn color="error">
      Error
    </BBtn>

    <BBtn
      disabled
    >
      Disabled
    </BBtn>
  </div>
</template>

Filled Tonal

Filled tonal buttons is an alternative middle ground between filled and outline buttons. Usefull in context where lower priority button requires extra emphasis.

Use variant="tonal" to create a tonal button.

<template>
  <div class="flex flex-wrap gap-4">
    <BBtn variant="tonal">
      Primary
    </BBtn>

    <BBtn
      color="secondary"
      variant="tonal"
    >
      Secondary
    </BBtn>

    <BBtn
      color="tertiary"
      variant="tonal"
    >
      Tertiary
    </BBtn>

    <BBtn
      color="error"
      variant="tonal"
    >
      Error
    </BBtn>
    <BBtn
      variant="tonal"
      disabled
    >
      Disabled
    </BBtn>
  </div>
</template>

Outlined

Outlined buttons are medium-emphasis buttons, containing actions that are important but aren't the primary action. It can be placed on a variety of backgrounds, however not recommended on top of images.

Use variant="outline" to create outlined button.

<template>
  <div class="flex flex-wrap gap-4">
    <BBtn
      color="primary"
      variant="outlined"
    >
      Primary
    </BBtn>
    <BBtn
      color="secondary"
      variant="outlined"
    >
      Secondary
    </BBtn>
    <BBtn
      color="tertiary"
      variant="outlined"
    >
      Tertiary
    </BBtn>
    <BBtn
      color="error"
      variant="outlined"
    >
      Error
    </BBtn>
    <BBtn
      variant="outlined"
      disabled
    >
      Disabled
    </BBtn>
  </div>
</template>

Text

Text buttons are used for lowest priority actions, specially when presenting multiple options. It can be placed on any surface but on very dark or light backgrounds use variant="text-inverse" to improve contrast

Use variant="text" to create a text button.

<template>
  <div class="flex flex-wrap gap-4">
    <BBtn
      color="primary"
      variant="text"
    >
      Primary
    </BBtn>

    <BBtn
      color="secondary"
      variant="text"
    >
      Secondary
    </BBtn>

    <BBtn
      color="tertiary"
      variant="text"
    >
      Tertiary
    </BBtn>

    <BBtn
      color="error"
      variant="text"
    >
      Error
    </BBtn>
    <BBtn
      variant="text"
      disabled
    >
      Disabled
    </BBtn>
  </div>
  <div class="bg-surface-inverse p-4 mt-4 rounded-md">
    <BBtn
      variant="text-inverse"
    >
      Text inverse
    </BBtn>
  </div>
</template>

Adding icons

Icons can visually communicate a button's action and help draw attention. It's optional and can be added by using icon prop to render icon in the button.

<template>
  <div class="flex gap-x-4 flex-wrap gap-y-2">
    <BBtn icon="i-mdi-star">
      <span>Primary</span>
    </BBtn>

    <BBtn
      variant="outlined"
      icon="i-mdi-star"
    >
      <span>Primary</span>
    </BBtn>

    <BBtn
      variant="tonal"
      icon="i-mdi-star"
    >
      <span>Primary</span>
    </BBtn>
    <BBtn
      variant="text"
      icon="i-mdi-star"
    >
      <span>Primary</span>
    </BBtn>
  </div>
  <div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
    <BBtn
      color="secondary"
      icon="i-mdi:currency-usd"
    >
      <span>Secondary</span>
    </BBtn>

    <BBtn
      color="secondary"
      variant="outlined"
      icon="i-mdi:currency-usd"
    >
      <span>secondary</span>
    </BBtn>

    <BBtn
      color="secondary"
      variant="tonal"
      icon="i-mdi:currency-usd"
    >
      <span>secondary</span>
    </BBtn>

    <BBtn
      color="secondary"
      variant="text"
      icon="i-mdi:currency-usd"
    >
      <span>secondary</span>
    </BBtn>
  </div>
  <div class="mt-8 flex gap-x-4 flex-wrap gap-y-2">
    <BBtn
      color="error"
      icon="i-mdi-heart"
    >
      <span>Error</span>
    </BBtn>

    <BBtn
      color="error"
      variant="outlined"
      icon="i-mdi-heart"
    >
      <span>Error</span>
    </BBtn>

    <BBtn
      color="error"
      variant="tonal"
      icon="i-mdi-heart"
    >
      <span>Error</span>
    </BBtn>

    <BBtn
      color="error"
      variant="text"
      icon="i-mdi-heart"
    >
      <span>Error</span>
    </BBtn>
  </div>
</template>

Icon Buttons

Icon buttons is mostly used to display actions in a compact layout.

Filled

Tonal

Outlined

text

text-inverse

<template>
  <div class="">
    <p class="font-medium">
      Filled
    </p>
    <div class="flex gap-4">
      <BIconBtn icon="i-mdi:star" />
      <BIconBtn
        color="secondary"
        icon="i-mdi:star"
      />
      <BIconBtn
        color="tertiary"
        icon="i-mdi:star"
      />
      <BIconBtn
        color="error"
        icon="i-mdi:star"
      />
      <BIconBtn
        disabled
        icon="i-mdi:star"
      />
    </div>
    <p class="font-medium">
      Tonal
    </p>
    <div class="flex gap-4">
      <BIconBtn
        variant="tonal"
        icon="i-mdi:heart"
      />
      <BIconBtn
        variant="tonal"
        color="secondary"
        icon="i-mdi:heart"
      />
      <BIconBtn
        variant="tonal"
        color="tertiary"
        icon="i-mdi:heart"
      />
      <BIconBtn
        variant="tonal"
        color="error"
        icon="i-mdi:heart"
      />
      <BIconBtn
        variant="tonal"
        disabled
        icon="i-mdi:heart"
      />
    </div>
    <p class="font-medium">
      Outlined
    </p>
    <div class="flex gap-4">
      <BIconBtn
        variant="outlined"
        icon="i-mdi:currency-usd"
      />
      <BIconBtn
        variant="outlined"
        color="secondary"
        icon="i-mdi:currency-usd"
      />
      <BIconBtn
        variant="outlined"
        color="tertiary"
        icon="i-mdi:currency-usd"
      />
      <BIconBtn
        variant="outlined"
        color="error"
        icon="i-mdi:currency-usd"
      />
      <BIconBtn
        variant="outlined"
        disabled
        icon="i-mdi:currency-usd"
      />
    </div>

    <p class="font-medium">
      text
    </p>
    <div class="flex gap-4">
      <BIconBtn
        variant="text"
        icon="i-mdi:cog"
      />
      <BIconBtn
        variant="text"
        color="secondary"
        icon="i-mdi:cog"
      />
      <BIconBtn
        variant="text"
        color="tertiary"
        icon="i-mdi:cog"
      />
      <BIconBtn
        variant="text"
        color="error"
        icon="i-mdi:cog"
      />
      <BIconBtn
        variant="text"
        disabled
        icon="i-mdi:cog"
      />
    </div>
    <p class="font-medium">
      text-inverse
    </p>
    <div class="flex gap-4 p-4 rounded-md bg-surface-inverse">
      <BIconBtn
        variant="text-inverse"
        icon="i-mdi:cog"
      />
      <BIconBtn
        variant="text-inverse"
        disabled
        icon="i-mdi:cog"
      />
    </div>
  </div>
</template>

Block

Add w-full class to make block button.

<template>
  <div class="grid gap-8">
    <BBtn class="w-full">
      Primary
    </BBtn>
    <BBtn
      class="w-full"
      color="secondary"
    >
      Secondary
    </BBtn>
  </div>
</template>