Violin.css

# Button: Addon

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <button class="inv-btn inv-btn--addon">
        <i class="material-icons">mode_edit</i>

      Addon
    </button>

`
`

    <button class="inv-btn {{ modifier }}" {{ternary disabled "disabled" "" }}>
      {{#if icon}}
        <i class="material-icons">mode_edit</i>
      {{/if}}

      {{ name }}
    </button>

`
`

    {
      "name": "Addon",
      "modifier": "inv-btn--addon",
      "icon": true
    }

`
File:

- Content:
  `

      /*
        Usado para ações de confirmação/criação.

        .inv-btn--primary - Botão primário, comum para ações primárias mais comuns de acordo com a necessidade do usuário.
        .inv-btn--accent - Botão acentuado, menos utilizado, é o botão de maior foco, para ações extremamente importantes.
        .inv-btn--outline - Versão outline, com menos destaque.
        .inv-btn--small - Versão menor do botão
        .inv-btn--very-large - Versão maior do botão
      */

      .inv-btn {
        background-color: var(--color-default--regular);
        border: none;
        border-radius: 4px;
        box-shadow: var(--shadow-8) var(--color-default--shadow);
        color: var(--color-system--white);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: bold;
        min-height: 40px;
        outline: 0;
        padding-left: var(--space-16);
        padding-right: var(--space-16);
        transition: 0.2s box-shadow, 0.2s background-color;
      }

      .inv-btn:hover {
        box-shadow: var(--shadow-12) var(--color-default--shadow);
      }

      .inv-btn:active {
        box-shadow: var(--shadow-3) var(--color-default--shadow);
        background-color: var(--color-default--dark);
      }

      /*
        COLOR VARIATIONS
      */

      /* PRIMARY */
      .inv-btn--primary {
        background-color: var(--color-primary--regular);
        box-shadow: var(--shadow-8) var(--color-primary--shadow);
      }

      .inv-btn--primary:hover {
        box-shadow: var(--shadow-12) var(--color-primary--shadow);
      }

      .inv-btn--primary:active {
        box-shadow: var(--shadow-3) var(--color-primary--shadow);
        background-color: var(--color-primary--dark);
      }

      /* ACCENT */
      .inv-btn--accent {
        background-color: var(--color-accent--regular);
        box-shadow: var(--shadow-8) var(--color-accent--shadow);
      }

      .inv-btn--accent:hover {
        box-shadow: var(--shadow-12) var(--color-accent--shadow);
      }

      .inv-btn--accent:active {
        box-shadow: var(--shadow-3) var(--color-accent--shadow);
        background-color: var(--color-accent--dark);
      }

      /* OUTLINE */
      .inv-btn--outline {
        background-color: var(--color-system--white);
        box-shadow: none;
        border: solid 1px var(--color-default--regular);
        color: var(--color-default--regular);
      }

      .inv-btn--outline:hover {
        background-color: var(--color-system--white);
      }

      .inv-btn--outline:active {
        background-color: var(--color-system--white);
        border-color: var(--color-default--dark);
        color: var(--color-default--dark);
      }

      /* OUTLINE PRIMARY */
      .inv-btn--outline.inv-btn--primary {
        border: solid 1px var(--color-primary--regular);
        color: var(--color-primary--regular);
      }

      .inv-btn--outline.inv-btn--primary:hover {
        box-shadow: var(--shadow-12) var(--color-primary--shadow);
      }

      .inv-btn--outline.inv-btn--primary:active {
        box-shadow: var(--shadow-3) var(--color-primary--shadow);
        border-color: var(--color-primary--dark);
        color: var(--color-primary--dark);
      }

      /* OUTLINE ACCENT */
      .inv-btn--outline.inv-btn--accent {
        border: solid 1px var(--color-accent--regular);
        color: var(--color-accent--regular);
      }

      .inv-btn--outline.inv-btn--accent:hover {
        box-shadow: var(--shadow-12) var(--color-accent--shadow);
      }

      .inv-btn--outline.inv-btn--accent:active {
        box-shadow: var(--shadow-3) var(--color-accent--shadow);
        border-color: var(--color-accent--dark);
        color: var(--color-accent--dark);
      }

      /*
        SIZE VARIATIONS
      */

      .inv-btn--small {
        min-height: 32px;
      }

      .inv-btn--very-large {
        min-width: 288px;
        min-height: 60px;
        border-radius: 8px;
        font-size: 18px;
      }

      .inv-btn--very-large.inv-btn--outline {
        border-width: 2px;
      }

      /*
        OTHER VARIATIONS
      */

      .inv-btn--addon {
        padding-left: 0;
      }

      .inv-btn > i {
        margin-left: var(--space-8);
        margin-right: var(--space-8);
      }

      /*
        DISABLED
      */

      .inv-btn:disabled,
      .inv-btn--primary:disabled,
      .inv-btn--accent:disabled,
      .inv-btn--outline:disabled,
      .inv-btn--outline.inv-btn--primary:disabled,
      .inv-btn--outline.inv-btn--accent:disabled {
        background-color: var(--color-default--white);
        color: var(--color-default--light);
        box-shadow: none;
        cursor: not-allowed;
        border: none;
      }

  `
- URL: /components/raw/button/button.css
- Filesystem Path: src/components/button/button.css
- Size: 4 KB

- Handle: @button--addon
- Variants (10): Default , Disabled , Addon , Primary , Accent , Outline Default , Outline Primary , Outline Accent , Small , Very Large
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/button/button.hbs

## Buttons

Usado para ações de confirmação/criação.

Tendo a classe base `.inv-btn`, e podendo ser utilizado em conjunto com `<button>` e `<a>`

### Default Button

Botão padrão, comum para ações regulares dos usuários, menos “importante” que o primary button.

`

    <a href="#" class="inv-btn">Default</a>
    <button class="inv-btn">Default</button>

`

Modificadores | Uso
--- | ---
`.inv-button--addon` | Possibilita utilizar icones com o botão
`.inv-button--primary` | Modifica o botão com estilização com a cor `primary`
`.inv-button--accent` | Modifica o botão com estilização com a cor `accent`
`.inv-button--outline` | Modifica o botão para utilizar as cores apenas nas boras
`.inv-button--small` | Torna o botão pequeno
`.inv-button--very-large` | Torna o botão grande

### Addon Button

Versão com icone.

`

    <a href="#" class="inv-btn inv-btn--addon">
      <i class="material-icons">mode_edit</i>
      Button
    </a>
    <button class="inv-btn inv-btn--very-addon">
      <i class="material-icons">mode_edit</i>
      Button
    </button>

`

### Primary Button

Botão primário, comum para ações primárias mais comuns de acordo com a necessidade do usuário.

`

    <a href="#" class="inv-btn inv-btn--primary">Primary</a>
    <button class="inv-btn inv-btn--primary">Primary</button

`

### Accent Button

Botão acentuado, menos utilizado, é o botão de maior foco, para ações extremamente importantes.

`

    <a href="#" class="inv-btn inv-btn--accent">Accent</a>
    <button class="inv-btn inv-btn--accent">Accent</button>

`

### Outline Button

Versão outline, com menos destaque.

`

    <a href="#" class="inv-btn inv-btn--outline">Outline</a>
    <button class="inv-btn inv-btn--outline">Outline</button

`

### Small Button

Versão menor do botão.

`

    <a href="#" class="inv-btn inv-btn--small">Button</a>
    <button class="inv-btn inv-btn--small">Button</button>

`

### Very Large Button

Versão maior do botão.

`

    <a href="#" class="inv-btn inv-btn--very-large">Button</a>
    <button class="inv-btn inv-btn--very-large">Button</button>

`