Buttons

Overview

Action buttons live in scss/components/_button.scss. Three variants share one base .btn class: primary (filled action surface), outline (bordered on primary surface), and transparent (text action on muted backgrounds). Pair with Button group for segmented toolbars.

Prerequisites

• PimentCSS installed, Installation.
• Semantic colors, --surface-action and --text-on-action from Colors.
• Focus tokens, --focus-ring on Accessibility.

Variants and states

Default, hover, focus, and disabled for each variant. Toggle light/dark in the header to verify contrast on primary and outline.

<button type="button" class="btn btn--primary">Save</button>

Icons in buttons

Place icons in .btn__icon (20px slot). Icons are decorative when visible text is present: set aria-hidden="true" on the icon element. Leading and trailing icons are supported via flex gap. See the Icons guide for library choice, slot sizes, and SVG patterns.

<button type="button" class="btn btn--primary">Continue<i class="ph ph-arrow-right btn__icon" aria-hidden="true"></i></button>

Icon-only

Square touch target via .btn--icon-only (min 44×44px). Always provide aria-label; never rely on the icon alone.

<button type="button" class="btn btn--primary btn--icon-only" aria-label="Add item"><i class="ph ph-plus btn__icon" aria-hidden="true"></i></button>

Link styled as a button

For navigation that looks like a button, use <a class="btn btn--primary"> with a real href. Do not use <button> for in-page navigation. For text links, see Links & breadcrumb.

In context

Primary + outline pairs work well in cards and forms. Keep one primary action per panel.

Class reference

Customize (Sass)

1. 01

   Override button tokens

   Adjust height, padding, and radius. Keep $btn-min-height at or above 2.75rem (44px) for touch targets.
   theme.scss

   @use "pimentcss-design-system" with (
     $btn-min-height: 2.75rem,
     $btn-padding-x: 1.25rem,
     $btn-border-radius: 0.5rem,
     $surface-action: var(--primary-600),
   );

2. 02

   Rebuild CSS

   Regenerate your theme CSS after variable changes.
   Terminal

   npm run build:css

See Customization for partial imports and semantic token overrides.

Accessibility (RGAA / WCAG)

Next steps