Button

Ready

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Default -->
<div style="margin: 10px">
    <button class="inv-btn ">

        Default
    </button>
</div>


        
            <!-- Disabled -->
<div style="margin: 10px">
    <button class="inv-btn " disabled>

        Disabled
    </button>
</div>


        
            <!-- Addon -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--addon">
        <i class="material-icons">mode_edit</i>

        Addon
    </button>
</div>


        
            <!-- Primary -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--primary">

        Primary
    </button>
</div>


        
            <!-- Accent -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--accent">

        Accent
    </button>
</div>


        
            <!-- Outline Default -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--outline">

        Outline default
    </button>
</div>


        
            <!-- Outline Primary -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--primary inv-btn--outline">

        Outline primary
    </button>
</div>


        
            <!-- Outline Accent -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--accent inv-btn--outline">

        Outline accent
    </button>
</div>


        
            <!-- Small -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--primary inv-btn--small">

        Small
    </button>
</div>


        
            <!-- Very Large -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--accent inv-btn--very-large">

        Very large
    </button>
</div>


        
            <!-- Block -->
<div style="margin: 10px">
    <button class="inv-btn inv-btn--accent inv-btn--very-large inv-btn--block">

        Block
    </button>
</div>


        <div style="margin: 10px">
  <button class="inv-btn {{ modifier }}" {{ternary disabled "disabled" "" }}>
    {{#if icon}}
      <i class="material-icons">mode_edit</i>
    {{/if}}

    {{ name }}
  </button>
</div>


        
        
            /* Default */
{
  "name": "Default"
}


        
            /* Disabled */
{
  "name": "Disabled",
  "disabled": true
}


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


        
            /* Primary */
{
  "name": "Primary",
  "modifier": "inv-btn--primary"
}


        
            /* Accent */
{
  "name": "Accent",
  "modifier": "inv-btn--accent"
}


        
            /* Outline Default */
{
  "name": "Outline default",
  "modifier": "inv-btn--outline"
}


        
            /* Outline Primary */
{
  "name": "Outline primary",
  "modifier": "inv-btn--primary inv-btn--outline"
}


        
            /* Outline Accent */
{
  "name": "Outline accent",
  "modifier": "inv-btn--accent inv-btn--outline"
}


        
            /* Small */
{
  "name": "Small",
  "modifier": "inv-btn--primary inv-btn--small"
}


        
            /* Very Large */
{
  "name": "Very large",
  "modifier": "inv-btn--accent inv-btn--very-large"
}


        
            /* Block */
{
  "name": "Block",
  "modifier": "inv-btn--accent inv-btn--very-large inv-btn--block"
}

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;
  color: var(--color-system--white);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  height: 40px;
  outline: none;
  padding-left: var(--space-16);
  padding-right: var(--space-16);
  transition: 0.2s box-shadow, 0.2s background-color, 0.2s 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);
}

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

.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);
  box-shadow: var(--shadow-12) var(--color-default--shadow);
}

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

/* 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 {
  height: 32px;
}

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

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

.inv-btn--very-large.inv-btn--addon > i {
  font-size: 34px;
}

.inv-btn--small.inv-btn--addon > i {
  font-size: 18px;
}

/*
  OTHER VARIATIONS
*/

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

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

.inv-btn--block {
  display: flex;
  width: 100%;
}
 
/*
  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.1 KB

Handle: @button
Variants (11): Default , Disabled , Addon , Primary , Accent , Outline Default , Outline Primary , Outline Accent , Small , Very Large , Block
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">
  <i class="material-icons">mode_edit</i>
  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>