Skip to content

Button โ€‹

A clickable button or link element. Toggle Vue / CSS to switch the live demo and source together.

Basic โ€‹

Default colors across the palette.

Vue SFC

Sizes โ€‹

xs, sm, md, lg, xl.

Vue SFC

Variants โ€‹

Solid, outline, tonal and gradient.

Vue SFC

Shapes โ€‹

Square (default) and pill.

Vue SFC

Text with icon โ€‹

Icon slot with left or right position.

Vue SFC

States โ€‹

Disabled, loading and full-width.

Vue SFC

Badges โ€‹

Notification badge in four colors.

Vue SFC

Renders as <a> when href is set.

Vue SFC

Button type โ€‹

button, submit, reset.

Vue SFC

Icon buttons โ€‹

Icon-only buttons with optional badge or tooltip.

Vue SFC

FAB โ€‹

Floating Action Button styles.

Vue SFC

Customized โ€‹

Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).

Vue SFC