Fylgja Button

Fylgja styles native <button> elements, and any .btn including links, into a consistent button controlled entirely by CSS variables. Use a real <button> for actions and an <a class="btn"> for navigation that should look like a button.

Preview

<button type="button">Button</button>
<a href="#" class="btn">Link button</a>
<button type="submit">Primary</button>

Usage

Every button reads from --btn-* variables, so you restyle by setting them rather than adding modifier classes:

• --btn-bg, --btn-color, --btn-stroke set the fill, text, and border colors.
• --btn-px, --btn-py set the padding (size); --btn-radius the corner radius.

A primary button sets --btn-bg: var(--brand) (the .--primary class from theme.css is a shortcut, and submit buttons are primary by default). Disable a button with the disabled attribute.

Buttons take on an active style automatically for :active, [aria-current="page"], [aria-selected="true"], and when they wrap a checked input, which is what powers the Button Group.

Accessibility

• Use <button type="button"> for in-page actions so it does not submit a form.
• Give an icon-only button an aria-label.
• Leave the native focus ring visible; do not remove the outline.