# Button

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/button

The button is a [CSS-only component](/docs/start#components) 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.

<button class="bt bt-lg bt-primary mt-sm1">Sample Large Button</button>

<div class="docs_oversizedTable">

| File              | Description | Source      |
| ----------------- | ----------- | ----------- |
| `component.button.css` | All button styles (`.button` or `.bt`) | [Github][1] |

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.button.css

</div>

## Playground

<Playground
  client:visible
  template={'<button class="{classes}"{attrs}>{icon}{label}</button>'}
  baseClasses="bt"
  snippets={{ icon: { preview: mail, code: "<svg>[…]</svg> " } }}
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "size", label: "Size", default: "", options: [
        { label: "Default", value: "" },
        { label: "Medium", value: "bt-md" },
        { label: "Large", value: "bt-lg" },
      ]},
      { type: "select", name: "color", label: "Color", default: "", options: [
        { label: "Default", value: "" },
        { label: "Primary", value: "bt-primary" },
        { label: "Yes", value: "bt-yes" },
        { label: "Maybe", value: "bt-maybe" },
        { label: "No", value: "bt-no" },
        { label: "White", value: "bt-white", previewSurface: "dark" },
        { label: "White outline", value: "bt-outline-white", previewSurface: "dark" },
      ]},
    ]},
    { heading: "Modifiers", items: [
      { type: "checkbox", name: "outline", label: "Outline", value: "bt-outline", default: false },
      { type: "checkbox", name: "text", label: "Text button", value: "bt-text", default: false },
      { type: "checkbox", name: "icon", label: "Icon", snippet: "icon", default: false },
      { type: "checkbox", name: "tightIcon", label: "Tight icon", value: "bt-tightIcon", default: false },
    ]},
    { heading: "Content", items: [
      { type: "text", name: "label", label: "Label", default: "Button" },
    ]},
    { heading: "State", items: [
      { type: "checkbox", name: "disabled", label: "Disabled", attr: "disabled", default: false },
    ]},
  ]}
/>

## HTML

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

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

<div class="docs_oversizedTable">

| Available modifiers                    | Style                                                                                  |
| -------------------------------------- | -------------------------------------------------------------------------------------- |
| `.bt`                                  | <button class="bt">Default Button</button>                                             |
| `.bt.bt-md`                            | <button class="bt bt-md">Medium Size</button>                                          |
| `.bt.bt-lg`                            | <button class="bt bt-lg">Large Size</button>                                           |
| `.bt.bt-outline`                       | <button class="bt bt-outline">Outline Button</button>                                  |
| `.bt.bt-outline-white`                 | <button class="bt bt-outline-white">White Outline</button>                             |
| `.bt.bt-white`                         | <button class="bt bt-white">Solid White</button>                                       |
| `.bt.bt-primary`                       | <button class="bt bt-primary">Primary CTA</button>                                     |
| `.bt.bt-yes`                           | <button class="bt bt-yes">Action Button</button>                                       |
| `.bt.bt-maybe`                         | <button class="bt bt-maybe">Action Button</button>                                     |
| `.bt.bt-no`                            | <button class="bt bt-no">Action Button</button>                                        |
| SVG inline inside button               | <button class="bt"><Fragment set:html={mail} />Icon Button</button>                    |
| `.bt.bt-tightIcon`                     | <button class="bt bt-tightIcon"><Fragment set:html={arrow} />Icon Button</button>      |
| `.bt.bt-text`                          | <button class="bt bt-text">"Text" Button</button>                                      |
| `disabled` attribute                   | <button class="bt" disabled>Disabled Button</button>                                   |
| `<a>` as button                        | <a class="bt" role="button" tabindex="0"> Link Button</a>                              |
| `<a>` as button (with `aria-disabled`) | <a class="bt" role="button" aria-disabled="true" tabindex="0">Disabled Link Button</a> |

</div>

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

<div class="docs_oversizedTable">

| 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).     |

</div>

### Examples

<ul class="docs_examples">
  <li>
    <a class="bt">This is a Link</a>
    ```html
    <a class="bt">This is a Link</a>
    ```
  </li>
  <li>
    <button class="bt bt-lg bt-primary mr-sm3" type="button">
      <Fragment set:html={mail} />
      Large Button with Icon
    </button>
    <button class="bt bt-lg bt-primary bt-tightIcon" type="button">
      <Fragment set:html={arrow} />
      Large Button with Tight Icon
    </button>
    ```html
    <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>
    ```
  </li>
  <li>
    <input
      class="bt bt-md bt-no bt-outline"
      type="submit"
      value="Cancel Input"
    />
    ```html
    <input
      class="bt bt-md bt-no bt-outline"
      type="submit"
      value="Cancel Input"
    />
    ```
  </li>
</ul>