Natcore LogoNatCorev2 — In Progress
v2 — In Progress

Button

Composable button utilities: pick a variant, a tone, and a size. Everything else (hover, focus, active) is built in.

At a glance

Playground

Controls
Preview
Codehtml
<button class="btn-solid/primary btn-size-md">
  Button
</button>

Button

componentcomposable

Applies button styling using the selected variant and tone palette.

Pattern
btn-{variant}[/{palette}]
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
Composes with
btn-size-{size}+btn-icon

Solid

Codehtml
<button class="btn-solid/primary">Primary</button>
<button class="btn-solid/secondary">Secondary</button>
<button class="btn-solid/accent">Accent</button>
<button class="btn-solid/surface">Surface</button>

Soft

Codehtml
<button class="btn-soft/primary">Primary</button>
<button class="btn-soft/secondary">Secondary</button>
<button class="btn-soft/accent">Accent</button>
<button class="btn-soft/surface">Surface</button>

Outline

Codehtml
<button class="btn-outline/primary">Primary</button>
<button class="btn-outline/secondary">Secondary</button>
<button class="btn-outline/accent">Accent</button>
<button class="btn-outline/surface">Surface</button>

Ghost

Codehtml
<button class="btn-ghost/primary">Primary</button>
<button class="btn-ghost/secondary">Secondary</button>
<button class="btn-ghost/accent">Accent</button>
<button class="btn-ghost/surface">Surface</button>

Button Group

componentcomposable

Groups adjacent buttons into a visually connected row sharing a variant style and tone palette.

Pattern
btn-group-{variant}[/{palette}]
Variant
solid/soft/outline/ghost/default:outline
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
Composes with
btn-size-{size}+btn-icon

Solid

Codehtml
<div class="btn-group-solid/primary">
  <label>
    <input type="radio" name="button-group-solid" checked />
    First
  </label>
  <label>
    <input type="radio" name="button-group-solid" />
    Second
  </label>
  <label>
    <input type="radio" name="button-group-solid" />
    Third
  </label>
</div>

Soft

Codehtml
<div class="btn-group-soft/primary">
  <label>
    <input type="radio" name="button-group-soft" checked />
    First
  </label>
  <label>
    <input type="radio" name="button-group-soft" />
    Second
  </label>
  <label>
    <input type="radio" name="button-group-soft" />
    Third
  </label>
</div>

Outline

Codehtml
<div class="btn-group-outline/primary">
  <label>
    <input
      type="radio"
      name="button-group-outline"
      checked
    />
    First
  </label>
  <label>
    <input type="radio" name="button-group-outline" />
    Second
  </label>
  <label>
    <input type="radio" name="button-group-outline" />
    Third
  </label>
</div>

Ghost

Codehtml
<div class="btn-group-ghost/primary">
  <label>
    <input type="radio" name="button-group-ghost" checked />
    First
  </label>
  <label>
    <input type="radio" name="button-group-ghost" />
    Second
  </label>
  <label>
    <input type="radio" name="button-group-ghost" />
    Third
  </label>
</div>

Sizes

modifier

Controls the padding and font size of a button. Composes with any btn variant.

Pattern
btn-size-{size}
Size
sm/md/lg/[length]

Preset Sizes

Use sm, md, or lg to apply one of the three built-in size presets.
Codehtml
<button class="btn-solid/primary btn-size-sm">Small</button>
<button class="btn-solid/primary btn-size-md">
  Medium
</button>
<button class="btn-solid/primary btn-size-lg">Large</button>

Arbitrary Size

Pass any CSS length in square brackets to set a custom size.
Codehtml
<button class="btn-solid/primary btn-size-[0.625rem]">
  0.625rem
</button>
<button class="btn-solid/primary btn-size-[1rem]">
  1rem
</button>
<button class="btn-solid/primary btn-size-[1.5rem]">
  1.5rem
</button>

Override via CSS Variable

Set --btn-size directly as a CSS variable utility to control size dynamically.
Codehtml
<button class="btn-solid/primary [--btn-size:0.75rem]">
  0.75rem
</button>
<button class="btn-solid/primary [--btn-size:1rem]">
  1rem
</button>
<button class="btn-solid/primary [--btn-size:1.25rem]">
  1.25rem
</button>

Icon Buttons

modifier

Modifier utility to create square, fully-rounded icon buttons by equalizing inline and block padding. Composes with any btn variant and size.

Pattern
btn-icon

Codehtml
<button class="btn-icon btn-solid/primary">
  <!-- icon svg -->
</button>
<button class="btn-icon btn-soft/primary">
  <!-- icon svg -->
</button>
<button class="btn-icon btn-outline/primary">
  <!-- icon svg -->
</button>
<button class="btn-icon btn-ghost/primary">
  <!-- icon svg -->
</button>

API Reference

Classes

componentbtn-{variant}[/{palette}]
component
Applies button styling using the selected variant and tone palette.
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentbtn-group-{variant}[/{palette}]
component
Groups adjacent buttons into a visually connected row sharing a variant style and tone palette.
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentbtn-size-{size}
component
Controls the padding and font size of a button. Composes with any btn variant.
Size
sm/md/lg/[length]
componentbtn-icon
component
Modifier utility to create square, fully-rounded icon buttons by equalizing inline and block padding. Composes with any btn variant and size.

CSS Variables

css-variable--btn-px
css-variable
Inline (horizontal) padding. Override to decouple from --btn-size.
default:calc(var(--size) * 0.8)
css-variable--btn-py
css-variable
Block (vertical) padding. Override to decouple from --btn-size.
default:calc(var(--size) * 0.5)
css-variable--btn-gap
css-variable
Gap between content elements (e.g. icon + label).
default:calc(var(--size) * 0.2)
On this page