Button

<Button>TailwindCSS Modules

Buttons trigger immediate actions, state commits, or navigation. Coloxo UI buttons provide predictable touch/click boundaries, standard WCAG 2.1 AA focus-visible indicator rings, 5 enterprise control heights, and 8 semantic variants engineered for high-density SaaS and financial platforms.

InstallationColoxo CLI
npx coloxo add button --style coloxo-css
ES Module ImportPlayground / npm package
import { Button } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-brand-deep: #072699--cx-red-600: #DC2626--cx-radius-md: 8pxfocus: 2px ring + 2px offset

1. Variant Matrix

Every variant rendered across Default, Hover, Active, Focus, and Disabled states at medium height (40px).

VariantDefaultHoverActiveFocusDisabledLoading
primary
secondary
secondary-brand
tertiary
primary-destructive
secondary-destructive
tertiary-destructive
link-color
link-gray

2. Control heights

Coloxo UI aligns all form inputs, selects, segmented controls, and buttons to strict 4px grid increments via --cx-control-height-*.

Sizes

size="xs"
Height: 32px (2rem)
Padding-x: 10px
Radius: 6px

High-density tables, grid row actions

size="sm"
Height: 36px (2.25rem)
Padding-x: 12px
Radius: 6px

Secondary dialogs, data toolbars

size="md"DEFAULT
Height: 40px (2.5rem)
Padding-x: 16px
Radius: 8px

Standard forms, dialog footers

size="lg"
Height: 44px (2.75rem)
Padding-x: 20px
Radius: 8px

Marketing / checkout actions

size="xl"
Height: 48px (3rem)
Padding-x: 24px
Radius: 10px

Hero CTAs, mobile touch targets

3. Icons & Groups

Leading / trailing icons

Button group

4. Interactive Props Configurator

Visual Render CanvasHEIGHT: 40PX | VARIANT: PRIMARY
tsx
<Button  icon={<Plus />}>  Deploy to Production</Button>

5. Dark theme

Calibrated for deep dashboard backgrounds (#0F172A and #020617), preserving AA accessibility without harsh pure-white borders.

primary

Solid brand blue #2348FF

secondary

Slate surface + border

secondary-brand

Deep navy + brand text

primary-destructive

Solid red-600 + focus glow

6. Enterprise layout compositions

Demonstrating hierarchy, alignment, icon pairing, and density in professional SaaS environments.

Review & Authorize Wire Transfer
Reference ID · WT-94821
Destination Account
Acme Treasury · •••• 4821
Authorized Sum
$128,450.00 USD
Dual approval required before funds leave the settlement window.
Cluster Nodes & Deployments
High-density 32px (xs) and 36px (sm) button integration.
node-east-01.us
Healthy • 12 Pods
node-west-04.us
Memory Pressure (88%)
Showing 2 of 28 production clusters

Accessibility

Keyboard Navigation

Buttons are fully focusable and triggerable via Space and Enter keys.

ARIA Attributes

Loading states automatically apply aria-busy="true" to announce to screen readers.

Color Contrast

All button variants meet WCAG 2.1 AA contrast requirements (4.5:1).

Props

NameTypeDefaultDescription
variant"primary" | "secondary" | "secondary-brand" | "tertiary" | "primary-destructive" | "secondary-destructive" | "tertiary-destructive" | "link-color" | "link-gray"primaryVisual style.
size"xs" | "sm" | "md" | "lg" | "xl"mdControl height (32–48px).
loadingboolean—Shows spinner and disables the button.
fullWidthboolean—Stretch to container width.
iconReactNode—Optional icon slot.
iconPosition"left" | "right"leftIcon placement.