Button
A clickable control that triggers an action.
Variants
Different visual styles for different contexts.
<button class="vt-btn vt-btn-primary">Primary</button>
<button class="vt-btn vt-btn-secondary">Secondary</button>
<button class="vt-btn vt-btn-bordered">Bordered</button>
<button class="vt-btn vt-btn-ghost">Ghost</button>
<button class="vt-btn vt-btn-danger">Danger</button>
<button class="vt-btn vt-btn-link">Link</button>Sizes
Available in small, default, large, and icon sizes.
<button class="vt-btn vt-btn-primary vt-btn-sm">Small</button>
<button class="vt-btn vt-btn-primary">Default</button>
<button class="vt-btn vt-btn-primary vt-btn-lg">Large</button>
<button class="vt-btn vt-btn-primary vt-btn-icon" aria-label="Add">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>With Icon
Buttons can include leading or trailing icons.
<button class="vt-btn vt-btn-primary">
<svg class="vt-w-4 vt-h-4">...</svg>
Upload
</button>States
Disabled and loading states.
<button class="vt-btn vt-btn-primary" disabled>Disabled</button>
<button class="vt-btn vt-btn-primary vt-opacity-80 vt-cursor-wait" disabled>
<svg class="vt-w-4 vt-h-4 vt-animate-spin">...</svg>
Loading...
</button>Full Width
Button that stretches to fill its container.
<button class="vt-btn vt-btn-primary vt-w-full">Sign In</button>
<button class="vt-btn vt-btn-bordered vt-w-full">Create Account</button>Icon Only
Buttons that contain only an icon, used for compact actions and toolbars.
Primary
Secondary
Bordered
Ghost
Danger
<!-- Square -->
<button class="vt-btn vt-btn-primary vt-btn-icon" aria-label="Add">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<!-- Rounded -->
<button class="vt-btn vt-btn-primary vt-btn-icon vt-rounded-full" aria-label="Add">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>Icon Rounded
Circle icon buttons using rounded-full.
<!-- Square -->
<button class="vt-btn vt-btn-primary vt-btn-icon" aria-label="Add">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<!-- Rounded -->
<button class="vt-btn vt-btn-primary vt-btn-icon vt-rounded-full" aria-label="Add">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>Icon Sizes
Icon buttons in small, default, and large sizes.
sm
md
lg
<!-- Small -->
<button class="vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-h-8 vt-w-8 vt-bg-info-primary vt-text-generic-white">
<svg class="vt-w-3.5 vt-h-3.5">...</svg>
</button>
<!-- Default -->
<button class="... vt-h-10 vt-w-10">...</button>
<!-- Large -->
<button class="... vt-h-12 vt-w-12">...</button>Guidelines
Reach for a button for any clickable action, including low-emphasis text actions. Keep one primary button per view — secondary actions use bordered or ghost. Don't use a button for inline navigation inside text; use a link instead.
Read our documentation to get started.
Read our to get started.
API Reference
All CSS classes available for the Button component.
| Class | Type | Description |
|---|---|---|
vt-btn |
Base | Base button styles — flex, rounded, font, transition |
vt-btn-primary |
Variant | Blue fill, white text — primary actions |
vt-btn-secondary |
Variant | Muted fill — secondary actions |
vt-btn-bordered |
Variant | Outline only, no fill |
vt-btn-danger |
Variant | Red fill — destructive actions |
vt-btn-link |
Variant | Looks like a link — underline on hover |
vt-btn-ghost |
Variant | Transparent, subtle hover background |
vt-btn-sm |
Size | Small button (28px height, text-xs) |
vt-btn-lg |
Size | Large button (44px height, text-base) |
vt-btn-icon |
Modifier | Square aspect ratio for icon-only buttons |
disabled |
State | HTML attribute — reduced opacity, no pointer events |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Role | Use <button> for actions, <a> for navigation |
| Keyboard | Enter and Space activate the button |
| Focus | Visible focus ring via :focus-visible |
| Disabled | Use disabled attribute — removes from tab order automatically |
| Icon-only | Add aria-label to describe the action when there is no visible text |