Buttons

A complete button component system with sizes, colors, outline/ghost/link styles, loading states with spinner animation, and button groups. Built on the core design tokens.

This addon is ~3KB and works alongside the core library. Install it separately to keep your base bundle lean.

Installation

Install via npm or load from a CDN. The buttons addon uses the same design tokens as the core library.

npm install @thenewcss/buttons

Basic Usage

Add the .btn class to any button or anchor element. Combine with color and style modifiers for different appearances.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline">Secondary</button>
<button class="btn btn-danger btn-outline">Danger</button>

Base Class

The .btn class provides the foundation for all buttons.

Class	Description
`.btn`	inline-flex, padding 0.5rem 1rem, font-size 0.875rem, font-weight 500, border-radius md, bg blue-600, color white, cursor pointer, transition 150ms. Hover: bg blue-700. Focus-visible: outline 2px blue-600.

Sizes

Use size modifier classes to change button dimensions. The default size sits between.btn-sm and.btn-lg.

<button class="btn btn-xs">Extra Small</button>
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Extra Large</button>

Sizes Reference

Class	Padding	Font Size
`.btn-xs`	0.25rem 0.5rem	0.75rem
`.btn-sm`	0.25rem 0.75rem	0.875rem
`.btn` (default)	0.5rem 1rem	0.875rem
`.btn-lg`	0.75rem 1.5rem	1rem
`.btn-xl`	1rem 2rem	1.125rem

Colors

Color classes change the background and text color of a button. Each variant includes appropriate hover states.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-dark">Dark</button>

Colors Reference

Class	Description
`.btn-primary`	Blue background, white text
`.btn-secondary`	Gray background, white text
`.btn-danger`	Red background, white text
`.btn-success`	Green background, white text
`.btn-warning`	Yellow background, dark text
`.btn-dark`	Gray-900 background, white text

Style Variants

Style modifiers change the visual appearance of buttons. Combine with color classes for themed variants.

Outline

<button class="btn btn-outline">Outline</button>
<button class="btn btn-primary btn-outline">Primary Outline</button>
<button class="btn btn-danger btn-outline">Danger Outline</button>
<button class="btn btn-success btn-outline">Success Outline</button>

Ghost

<button class="btn btn-ghost">Ghost</button>

Link

<button class="btn btn-link">Link Button</button>

Styles Reference

Class	Description
`.btn-outline`	Transparent background, currentColor border. Hover: blue-600 bg, white text.
`.btn-ghost`	Transparent background, blue-600 text. Hover: blue-50 background.
`.btn-link`	Transparent background, blue-600 text, underlined. No padding or border-radius.

States

Buttons support disabled and loading states out of the box.

Disabled

<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-secondary btn-outline" disabled>Disabled Outline</button>

Loading

<button class="btn btn-primary btn-loading">Loading</button>
<button class="btn btn-secondary btn-loading">Loading</button>

States Reference

Class / Attribute	Description
`disabled` / `[disabled]`	Reduces opacity to 0.5, sets cursor to not-allowed.
`.btn-loading`	Makes text transparent and displays a ::after spinner animation.

Layout

Layout modifiers control button width, aspect ratio, and grouping.

Block Button

<button class="btn btn-primary btn-block">Full Width Button</button>

Icon Button

<button class="btn btn-icon" aria-label="Close">&#x2715;</button>
<button class="btn btn-icon btn-outline" aria-label="Add">&#x2b;</button>
<button class="btn btn-icon btn-sm" aria-label="Check">&#x2713;</button>

Button Group

<div class="btn-group">
  <button class="btn btn-outline">Left</button>
  <button class="btn btn-outline">Center</button>
  <button class="btn btn-outline">Right</button>
</div>

Layout Reference

Class	Description
`.btn-block`	Makes the button full width (display: block, width: 100%).
`.btn-icon`	Square button with aspect-ratio 1, ideal for icon-only buttons.
`.btn-group`	Wraps buttons in an inline-flex container. Children lose inner border-radius; first and last keep outer corners.

Full Class Reference

All available classes from the buttons addon at a glance.

Class	Category	Description
`.btn`	Base	Base button styles with padding, font, radius, color, and transitions
`.btn-xs`	Size	Extra small: 0.25rem/0.5rem padding, 0.75rem font
`.btn-sm`	Size	Small: 0.25rem/0.75rem padding, 0.875rem font
`.btn-lg`	Size	Large: 0.75rem/1.5rem padding, 1rem font
`.btn-xl`	Size	Extra large: 1rem/2rem padding, 1.125rem font
`.btn-primary`	Color	Blue background, white text
`.btn-secondary`	Color	Gray background, white text
`.btn-danger`	Color	Red background, white text
`.btn-success`	Color	Green background, white text
`.btn-warning`	Color	Yellow background, dark text
`.btn-dark`	Color	Gray-900 background, white text
`.btn-outline`	Style	Transparent bg, currentColor border; hover fills blue-600
`.btn-ghost`	Style	Transparent bg, blue-600 text; hover fills blue-50
`.btn-link`	Style	Transparent, blue-600, underlined, no padding/radius
`.btn-loading`	State	Transparent text with ::after spinner animation
`.btn-block`	Layout	Full-width button
`.btn-icon`	Layout	Square button with aspect-ratio 1
`.btn-group`	Layout	Inline-flex container; children share inner edges