Button — uicraft

Variants

Different visual styles for different contexts.

html

<button class="uc-btn uc-btn-primary">Primary</button>
<button class="uc-btn uc-btn-secondary">Secondary</button>
<button class="uc-btn uc-btn-bordered">Bordered</button>
<button class="uc-btn uc-btn-clear">Clear</button>
<button class="uc-btn uc-btn-danger">Danger</button>
<button class="uc-btn uc-btn-link">Link</button>

Sizes

Available in small, default, large, and icon sizes.

html

<button class="uc-btn uc-btn-primary uc-btn-sm">Small</button>
<button class="uc-btn uc-btn-primary">Default</button>
<button class="uc-btn uc-btn-primary uc-btn-lg">Large</button>
<button class="uc-btn uc-btn-primary uc-btn-icon">
  <svg class="uc-w-4 uc-h-4">...</svg>
</button>

With Icon

Buttons can include leading or trailing icons.

html

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

States

Disabled and loading states.

html

<button class="uc-btn uc-btn-primary" disabled>Disabled</button>
<button class="uc-btn uc-btn-primary uc-opacity-80 uc-cursor-wait" disabled>
  <svg class="uc-w-4 uc-h-4 uc-animate-spin">...</svg>
  Loading...
</button>

Full Width

Button that stretches to fill its container.

html

<button class="uc-btn uc-btn-primary uc-w-full">Sign In</button>
<button class="uc-btn uc-btn-bordered uc-w-full">Create Account</button>

Icon Only

Buttons that contain only an icon, used for compact actions and toolbars.

html

Primary

Secondary

Bordered

Clear

Danger

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

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

Icon Rounded

Circle icon buttons using rounded-full.

html

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

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

Icon Sizes

Icon buttons in small, default, and large sizes.

html

sm

md

lg

<!-- Small -->
<button class="uc-inline-flex uc-items-center uc-justify-center uc-rounded-lg uc-h-8 uc-w-8 uc-bg-accents-blue uc-text-constant-white">
  <svg class="uc-w-3.5 uc-h-3.5">...</svg>
</button>

<!-- Default -->
<button class="... uc-h-10 uc-w-10">...</button>

<!-- Large -->
<button class="... uc-h-12 uc-w-12">...</button>

API Reference

All CSS classes available for the Button component.

Class	Type	Description
`uc-btn`	Base	Base button styles — flex, rounded, font, transition
`uc-btn-primary`	Variant	Blue fill, white text — primary actions
`uc-btn-secondary`	Variant	Muted fill — secondary actions
`uc-btn-bordered`	Variant	Outline only, no fill
`uc-btn-clear`	Variant	No border, no fill — minimal style
`uc-btn-danger`	Variant	Red fill — destructive actions
`uc-btn-link`	Variant	Looks like a link — underline on hover
`uc-btn-ghost`	Variant	Transparent, subtle hover background
`uc-btn-sm`	Size	Small button (28px height, text-xs)
`uc-btn-lg`	Size	Large button (44px height, text-base)
`uc-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