Menu
Documentation
v4.0.0-beta.4

Button

<BaseButton /> · A classic and versatile interaction.

View SourceOpen Issue
vue
<template>
  <BaseButton size="md">
    Button
  </BaseButton>
</template>

Features

  • Fully accessible
  • Can become a link
  • Supports disabled and loading states

Anatomy

This component accepts any content as a child. You can customize the button's visual style by using the available props.

vue
<template>
  <BaseButton>
    <!-- Content goes here -->
  </BaseButton>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
to
default:-
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

The location to which the button should navigate when clicked. This is only applicable if the button is a link.

href
default:-
string

Using href instead of to result in a native anchor with no router functionality.

rel
default:""
string

The value of the 'rel' attribute of the button. This attribute is used to specify the relationship of the linked document with the current document.

target
default:""
string

The value of the 'target' attribute of the button. This attribute is used to specify where to open the linked document.

type
default:-
"reset" | "submit" | "button"

The type of the button.

loading
default:-
boolean

Whether the button is in a loading state.

variant
default:"default"
"default" | "none" | "primary" | "dark" | "muted" | "ghost" | "destructive" | "link"

The variant of the button..

size
default:"md"
"sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl"

The size of the button

rounded
default:"md"
"sm" | "full" | "md" | "lg" | "none"

The radius of the button.

Slot Type
#default
any

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Primary button variables */
  --color-primary-invert: var(--color-white);
  --color-primary-base: var(--color-primary-500);
  --color-primary-heavy: var(--color-primary-600);
  --color-primary-light: var(--color-primary-400);

  /* Destructive button variables */
  --color-destrutive-invert: var(--color-white);
  --color-destrutive-base: var(--color-destrutive-500);
  --color-destrutive-heavy: var(--color-destrutive-600);
  --color-destrutive-light: var(--color-destrutive-400);
}

Examples

Link

Use the to prop to assign an url an turn the button to a link.

Google.com
vue
<template>
  <BaseButton to="https://google.com" size="md">
    Google.com
  </BaseButton>
</template>

Size

Use the size prop to change the size of the button.

vue
<template>
  <BaseButton size="sm" rounded="md">
    Button
  </BaseButton>
  <BaseButton size="md" rounded="md">
    Button
  </BaseButton>
  <BaseButton size="lg" rounded="md">
    Button
  </BaseButton>
  <BaseButton size="xl" rounded="md">
    Button
  </BaseButton>
</template>

Badge

Use the Chip component to add a badge to the button. You can also use the pulse prop to make the badge pulse.

vue
<template>
  <BaseChip :offset="1" pulse>
    <BaseButton
      size="md"
      rounded="md"
      badge
      badge-pulse
    >
      Button
    </BaseButton>
  </BaseChip>
</template>

Variant

Use the variant prop to change the color and / or aspect of the button.

vue
<template>
  <BaseButton variant="default">
    Button
  </BaseButton>
  <BaseButton variant="muted">
    Button
  </BaseButton>
  <BaseButton variant="ghost">
    Button
  </BaseButton>
  <BaseButton variant="link">
    Button
  </BaseButton>
  <BaseButton variant="primary">
    Button
  </BaseButton>
  <BaseButton variant="dark">
    Button
  </BaseButton>
  <BaseButton variant="destructive">
    Button
  </BaseButton>
</template>

Icon

Insert an icon inside a button to enhace your interface.

vue
<template>
  <BaseButton variant="outline" color="success">
    <Icon name="cib:circleci" class="-ms-1 h-4 w-4" />
    <span>Button</span>
  </BaseButton>
</template>

Icon buttons

Write the button size as icon-{size} to make it an icon button.

vue
<template>
  <BaseButton size="icon-sm" rounded="md">
    <Icon name="solar:add-folder-linear" class="size-4" />
  </BaseButton>
  <BaseButton size="icon-md" rounded="md">
    <Icon name="solar:add-folder-linear" class="size-5" />
  </BaseButton>
  <BaseButton size="icon-lg" rounded="md">
    <Icon name="solar:add-folder-linear" class="size-6" />
  </BaseButton>
  <BaseButton size="icon-xl" rounded="md">
    <Icon name="solar:add-folder-linear" class="size-7" />
  </BaseButton>
</template>

Loading

Use the loading prop to set the button in loading state.

vue
<template>
  <BaseButton size="sm" rounded="md" loading>
    Button
  </BaseButton>
  <BaseButton size="md" rounded="md" loading>
    Button
  </BaseButton>
  <BaseButton size="lg" rounded="md" loading>
    Button
  </BaseButton>
  <BaseButton size="xl" rounded="md" loading>
    Button
  </BaseButton>
</template>

Disabled

Use the disabled prop to set the button in disabled state.

vue
<template>
  <BaseButton size="sm" rounded="md" disabled>
    Button
  </BaseButton>
  <BaseButton size="md" rounded="md" disabled>
    Button
  </BaseButton>
  <BaseButton size="lg" rounded="md" disabled>
    Button
  </BaseButton>
  <BaseButton size="xl" rounded="md" disabled>
    Button
  </BaseButton>
</template>

Breadcrumb

Card