atom :: Button

The button atom uses the .button or its shorthand .bt class. Apply it to <button>, <input type="submit">, or <a> elements for a consistent look.

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 Name	class	Source
`atom.button.css`	`.button` or `.bt`	Github

HTML

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

The .bt-outline-white is a special case button useful for dark/image backgrounds such as Heroes and doesn’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-primary`
`.bt.bt-primary.bt-outline`
`.bt.bt-yes`
`.bt.bt-yes.bt-outline`
`.bt.bt-maybe`
`.bt.bt-maybe.bt-outline`
`.bt.bt-no`
`.bt.bt-no.bt-outline`
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 the default theme:

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"
/>