Components

Buttons

Primary and secondary actions, static color variants, outline and ghost styles, four sizes, button groups, and full keyboard accessibility out of the box.

Themeable

Primary & Secondary

Use btn-primary for the main call-to-action and btn-secondary (or plain btn) for secondary actions. Both respond to custom themes via --ply-btn-default-bg and --ply-btn-secondary-bg.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-primary-outline">Primary Outline</button>
<button class="btn btn-secondary-outline">Secondary Outline</button>
<button class="btn btn-ghost">Ghost</button>

Theming

Override --ply-btn-default-bg in a custom theme to change the primary button and link colors together. Secondary follows --ply-btn-secondary-bg. Color buttons (btn-blue, etc.) are immune to theming.

[data-theme="warm"] {
  --ply-btn-default-bg: #92400e;   /* Primary button + links */
  --ply-btn-secondary-bg: #78350f; /* Secondary button */
  --ply-btn-default-color: #fff;   /* Primary text */
  --ply-btn-secondary-color: #fff; /* Secondary text */
}
/* See Colors & Theming for the full warm theme definition. */

Static

Color Variants

Static color buttons use hardcoded values and are immune to theming. Use them for color-coded actions (e.g., delete = red, success = green).

<button class="btn btn-blue">Blue</button>
<button class="btn btn-red">Red</button>
<button class="btn btn-green">Green</button>
<button class="btn btn-yellow">Yellow</button>
<button class="btn btn-black">Black</button>

Variants

Outline Buttons

<button class="btn btn-outline">Outline</button>
<button class="btn btn-outline bold">Outline Bold</button>

Variants

Ghost Buttons

Transparent background with no border. Subtle hover background for low-emphasis actions.

<button class="btn btn-ghost">Ghost</button>
<!-- Icon-only: equal padding, square shape -->
<button class="btn btn-ghost btn-icon" aria-label="Search">
  <svg>...</svg>
</button>

Sizes

Button Sizes

Class	Alias	Size
`btn-big`	`btn-lg`	Large
(default)	—	Normal
`btn-small`	`btn-sm`	Small
`btn-smaller`	`btn-xs`	Extra small

States

Active & Disabled

<button class="btn btn-active">Active</button>
<button class="btn btn-disabled">Disabled</button>
<button class="btn" disabled>Native Disabled</button>

Shapes

Square Buttons

Single Button Container

<button class="btn btn-primary btn-straight">No border-radius</button>
<button class="btn btn-square">Alias for btn-straight</button>

<div class="btn-single">
  <button class="btn btn-primary">Single Button</button>
</div>

Groups

Button Groups

Aligned Groups

Full Width & Rounded

<div class="btn-group">
  <button class="btn btn-primary">Save</button>
  <button class="btn">Cancel</button>
</div>

<div class="btn-group fill-width">
  <button class="btn">Full</button>
  <button class="btn">Width</button>
</div>

Build forms with styled inputs and validation, or add navigation to your layout.