Button — Veritheme

Variants

Different visual styles for different contexts.

html

<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.

html

<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">
  <svg class="vt-w-4 vt-h-4">...</svg>
</button>

With Icon

Buttons can include leading or trailing icons.

html

<button class="vt-btn vt-btn-primary">
  <svg class="vt-w-4 vt-h-4">...</svg>
  Upload
</button>

States

Disabled and loading states.

html

<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.

html

<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.

html

Primary

Secondary

Bordered

Ghost

Danger

<!-- Square -->
<button class="vt-btn vt-btn-primary vt-btn-icon">
  <svg class="vt-w-4 vt-h-4">...</svg>
</button>

<!-- Rounded -->
<button class="vt-btn vt-btn-primary vt-btn-icon vt-rounded-full">
  <svg class="vt-w-4 vt-h-4">...</svg>
</button>

Icon Rounded

Circle icon buttons using rounded-full.

html

<!-- Square -->
<button class="vt-btn vt-btn-primary vt-btn-icon">
  <svg class="vt-w-4 vt-h-4">...</svg>
</button>

<!-- Rounded -->
<button class="vt-btn vt-btn-primary vt-btn-icon vt-rounded-full">
  <svg class="vt-w-4 vt-h-4">...</svg>
</button>

Icon Sizes

Icon buttons in small, default, and large sizes.

html

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>

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