component :: Button

The button is a CSS-only component using the .bt class (canonical; .button is kept as an alias). Apply it to <button>, <input type="submit">, or <a> elements for a consistent look. All modifiers use the bt- prefix either way.

For accessibility, use <button> for actions and <a> for navigation. If you use <a> as a button, add role="button" and tabindex="0" and aria-disabled="true" if disabled.

File	Description	Source
`component.button.css`	All button styles (`.button` or `.bt`)	Github

Playground

Copied!

<button class="bt">Button</button>

HTML

You can combine modifiers in any way you like (see examples).

The .bt-outline-white and .bt-white (solid, primary text) are special case buttons useful for dark/image/gradient backgrounds such as Heroes and don’t change between light/dark themes.

Available modifiers	Style
`.bt`
`.bt.bt-md`
`.bt.bt-lg`
`.bt.bt-outline`
`.bt.bt-outline-white`
`.bt.bt-white`
`.bt.bt-primary`
`.bt.bt-yes`
`.bt.bt-maybe`
`.bt.bt-no`
SVG inline inside button
`.bt.bt-tightIcon`
`.bt.bt-text`
`disabled` attribute
`<a>` as button	Link Button
`<a>` as button (with `aria-disabled`)	Disabled Link Button

Custom properties

The following custom properties are available in settings.ui.css:

Property	Description
`--bt-font-size`	Font size.
`--bt-font-size-lg`	Large font size.
`--bt-font-weight`	Font weight.
`--bt-color`	Text color.
`--bt-color-hover`	Text color (hover).
`--bt-background-color`	Background color.
`--bt-background-color-hover`	Background color (hover).
`--bt-border-color`	Border color.
`--bt-border-width`	Border width.
`--bt-border-radius`	Border radius.
`--bt-border-radius-lg`	Large border radius.
`--bt-outline-color-hover`	Outline text color (hover).
`--bt-outline-background-color-hover`	Outline background color (hover).
`--bt-outline-border-color`	Outline border color.
`--bt-primary-color`	Primary text color.
`--bt-primary-color-hover`	Primary text color (hover).
`--bt-primary-background-color`	Primary background color.
`--bt-primary-background-color-hover`	Primary background color (hover).
`--bt-primary-border-color`	Primary border color.
`--bt-primary-border-color-hover`	Primary border color (hover).

Examples

This is a Link
```
<a class="bt">This is a Link</a>
```

<button class="bt bt-lg bt-primary" type="button">
  <svg>[…]</svg> Large Button with Icon
</button>
<button class="bt bt-lg bt-primary bt-tightIcon" type="button">
  <svg>[…]</svg> Large Button with Tight Icon
</button>

<input
  class="bt bt-md bt-no bt-outline"
  type="submit"
  value="Cancel Input"
/>

component :: Button

Playground

Variation

Modifiers

Content

State

HTML

Custom properties

Examples