Button

An inline-flex control at 40px default height. Four variants control the visual weight, three sizes cover compact to spacious layouts, and six role colors communicate intent. Works on <button>, <a>, and <input type="submit">.

Variants

<button class="ln-button ln-button--solid">Solid</button>
<button class="ln-button ln-button--outline">Outline</button>
<button class="ln-button ln-button--ghost">Ghost</button>
<button class="ln-button ln-button--link">Link</button>

Sizes

<button class="ln-button ln-button--solid ln-button--sm">Small</button>
<button class="ln-button ln-button--solid">Default</button>
<button class="ln-button ln-button--solid ln-button--lg">Large</button>

Responsive sizes

Size modifiers accept a @{breakpoint} suffix to change the button size at different viewport widths. Combine a base size with a responsive override for adaptive layouts.

<!-- Small on mobile, large from md up -->
<button class="ln-button ln-button--solid ln-button--sm ln-button--lg@md">Responsive</button>

Responsive full width

The --block@{bp} modifier makes the button full-width from the specified breakpoint upward.

<!-- Full width from md up, inline below -->
<button class="ln-button ln-button--solid ln-button--block@md">Full width at md</button>

Role colors

Six semantic roles set the fill, text, and border colors through the role engine. Shown here on the solid variant where the filled background makes each color most visible.

<button class="ln-button ln-button--solid ln-button--primary">Primary</button>
<button class="ln-button ln-button--solid ln-button--secondary">Secondary</button>
<button class="ln-button ln-button--solid ln-button--success">Success</button>
<button class="ln-button ln-button--solid ln-button--warning">Warning</button>
<button class="ln-button ln-button--solid ln-button--danger">Danger</button>
<button class="ln-button ln-button--solid ln-button--info">Info</button>

Outline with role colors

Outline buttons respond to the same role modifiers with colored text and a tinted hover background. Ghost and link variants also support roles.

<button class="ln-button ln-button--outline ln-button--primary">Primary</button>
<button class="ln-button ln-button--outline ln-button--secondary">Secondary</button>
<button class="ln-button ln-button--outline ln-button--success">Success</button>
<button class="ln-button ln-button--outline ln-button--warning">Warning</button>
<button class="ln-button ln-button--outline ln-button--danger">Danger</button>
<button class="ln-button ln-button--outline ln-button--info">Info</button>

With icon

Use the __icon and __label elements to pair an icon with text. Element order controls placement. Icons shown here are from Font Awesome.

<button class="ln-button ln-button--solid">
  <span class="ln-button__icon">
    <i class="fa-solid fa-plus" aria-hidden="true"></i>
  </span>
  <span class="ln-button__label">Add item</span>
</button>
<button class="ln-button ln-button--outline">
  <span class="ln-button__label">Next</span>
  <span class="ln-button__icon">
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  </span>
</button>

Icon-only button

The --icon modifier makes the button square. Always provide an aria-label for accessibility. Icons shown here are from Font Awesome.

<button class="ln-button ln-button--solid ln-button--icon" aria-label="Add">
  <span class="ln-button__icon">
    <i class="fa-solid fa-plus" aria-hidden="true"></i>
  </span>
</button>
<button class="ln-button ln-button--outline ln-button--icon" aria-label="Settings">
  <span class="ln-button__icon">
    <i class="fa-solid fa-gear" aria-hidden="true"></i>
  </span>
</button>
<button class="ln-button ln-button--ghost ln-button--icon" aria-label="Close">
  <span class="ln-button__icon">
    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
  </span>
</button>

Border radius

Buttons use a 2px radius by default. Shape modifiers override it for sharper or rounder corners.

<button class="ln-button ln-button--solid ln-button--square">Square</button>
<button class="ln-button ln-button--solid">Default</button>
<button class="ln-button ln-button--solid ln-button--rounded-sm">Rounded sm</button>
<button class="ln-button ln-button--solid ln-button--rounded-md">Rounded md</button>
<button class="ln-button ln-button--solid ln-button--rounded-lg">Rounded lg</button>
<button class="ln-button ln-button--solid ln-button--rounded-xl">Rounded xl</button>
<button class="ln-button ln-button--solid ln-button--pill">Pill</button>

Full width

The --block modifier stretches the button to fill its container.

<button class="ln-button ln-button--solid ln-button--block">Full width button</button>
<button class="ln-button ln-button--outline ln-button--block">Full width outline</button>

Disabled state

Both the disabled attribute and aria-disabled="true" produce the same visual result. Use aria-disabled when the button should remain focusable for screen readers.

<button class="ln-button ln-button--solid" disabled>Disabled solid</button>
<button class="ln-button ln-button--outline" disabled>Disabled outline</button>
<button class="ln-button ln-button--ghost" aria-disabled="true">Disabled ghost</button>

Loading state

Setting aria-busy="true" shows the __spinner element next to the label. The text stays visible so users can see which action is in progress.

<button class="ln-button ln-button--solid" aria-busy="true">
  <span class="ln-button__label">Saving</span>
  <span class="ln-button__spinner">
    <span class="ln-spinner ln-spinner--sm"></span>
  </span>
</button>
<button class="ln-button ln-button--outline" aria-busy="true">
  <span class="ln-button__label">Loading</span>
  <span class="ln-button__spinner">
    <span class="ln-spinner ln-spinner--sm"></span>
  </span>
</button>

Toggle button

The aria-pressed attribute drives toggle styling. When pressed, the button fills with the role color. Works on any variant and with role colors.

<button class="ln-button ln-button--outline" aria-pressed="false">Unpressed</button>
<button class="ln-button ln-button--outline" aria-pressed="true">Pressed</button>

Reference

Class	Description	Responsive
`.ln-button`	Button element	No
`.ln-button__label`	Label wrapper	No
`.ln-button__icon`	Icon element	No
`.ln-button__spinner`	Loading spinner	No
`.ln-button__badge`	Badge element	No
`.ln-button--neutral`	Neutral variant with border	No
`.ln-button--subtle`	Subtle tinted background	No
`.ln-button--outline`	Outlined variant	No
`.ln-button--ghost`	Transparent background	No
`.ln-button--link`	Link-style button	No
`.ln-button--sm`	Small size (32px height)	Yes
`.ln-button--lg`	Large size (48px height)	Yes
`.ln-button--block`	Full-width button	Yes
`.ln-button--icon`	Square icon-only button	No
`.ln-button--pill`	Pill-shaped border radius	No
`.ln-button--square`	No border radius	No
`.ln-button--{role}`	Role modifier (primary, secondary, success, warning, danger, info)	No