Button

Create a button with icon or link capabilities. The button can be used to trigger an action or to navigate to a new page. The button can be customized with a color, size, and icon.

Usage

Use the default slot to set the text of the Button.

PrimarySecondaryAccentSuccessDanger

PrimaryLabel

SolidToneTranslucentGhostOutlinePlain

SolidLabel

xssmmdlg

mdLabel

ButtonSubmitReset

ButtonLabel

buttonadivspan

buttonLabel

AsChild

Icon

IconStart

IconEnd

Square

Round

Block

Selected

Disabled

Blur

Inline

Vue

HTML

Variants

The button comes in five different variants.

Modes

Each variant of the button comes with six different modes.

Disabled

The button can be disabled.

Sizes

The button comes in four different sizes.

Icons

The button automatically detects nested icons and sizes them correctly. Make sure to nest text in a <span>, when including both text and icon.

In addition to the default icon size, there is also an option for an icon-only button with a slightly larger icon.

Width

The button can be set to fill its parent container.

It can also simply be given an arbitrary width.

When using an icon-only button, the button can optionally be squared.

as and asChild

Under the hood the Button is using @maas/vue-primitive and accepts both as and asChild props. This means the Button can pass all its attributes to a child component or be rendered with a different HTML tag.

Anchor Element Anchor Element