CButton

Os botões permitem que os usuários executem uma ação ou naveguem para outra página. Eles têm vários estilos para várias necessidades e são ideais para chamar a atenção para onde um usuário precisa fazer algo para seguir em frente em um fluxo.

Exemplos

API

Exemplos de Botões

Simples

<c-button> My Button </c-button>

<c-button>
  My Button
</c-button>

Multiplos tamanhos

<c-button size="sm"> Small </c-button> <c-button size="md" style="margin-top: 16px"> Medium </c-button> <c-button size="lg" style="margin-top: 16px"> Large </c-button>

<c-button size="sm">
  Small
</c-button>
<c-button size="md" style="margin-top: 16px">
  Medium
</c-button>
<c-button size="lg" style="margin-top: 16px">
  Large
</c-button>

Outline

Variação de estilos

O CButton pode alternar entre os estilos secondary, outline, cta e ghost.

Secondary

<div class="c-d-flex c-center" style="height: 70px; background-color: rgba(0,0,0,0.8)"> <c-button secondary> Secondary </c-button> </div>

<div class="c-d-flex c-center" style="height: 70px; background-color: rgba(0,0,0,0.8)">
  <c-button secondary>
    Secondary
  </c-button>
</div>

Outline

<c-button outline> Outlined </c-button>

<c-button outline>
  Outlined
</c-button>

CTA

<c-button cta> CTA </c-button>

<c-button cta>
  CTA
</c-button>

Ghost

<c-button ghost> Ghost </c-button>

<c-button ghost>
  Ghost
</c-button>

Cores

<div class="c-d-flex"> <c-button color="primary"> My Button </c-button> <c-button color="green" style="margin-left: 16px"> My Button </c-button> <c-button color="orange" style="margin-left: 16px"> My Button </c-button> <c-button color="red" style="margin-left: 16px"> My Button </c-button> <c-button color="gray" style="margin-left: 16px"> My Button </c-button> </div> <div class="c-d-flex" style="margin-top: 16px"> <c-button outline color="primary"> My Button </c-button> <c-button outline color="green" style="margin-left: 16px"> My Button </c-button> <c-button outline color="orange" style="margin-left: 16px"> My Button </c-button> <c-button outline color="red" style="margin-left: 16px"> My Button </c-button> <c-button outline color="gray" style="margin-left: 16px"> My Button </c-button> </div>

<div class="c-d-flex">
  <c-button color="primary">
    My Button
  </c-button>
  <c-button color="green" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button color="orange" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button color="red" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button color="gray" style="margin-left: 16px">
    My Button
  </c-button>
</div>

<div class="c-d-flex" style="margin-top: 16px">
  <c-button outline color="primary">
    My Button
  </c-button>
  <c-button outline color="green" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button outline color="orange" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button outline color="red" style="margin-left: 16px">
    My Button
  </c-button>
  <c-button outline color="gray" style="margin-left: 16px">
    My Button
  </c-button>
</div>

Com ícones

Basta renderizar o componente de ícone dentro do conteúdo do Button, e passar a classe correta de posicionamento: c-icon--left ou c-icon--right

<c-button icon> My Button <c-icon name="add" class="c-icon--right" /> </c-button> <c-button outline icon style="margin-top: 16px"> <c-icon name="add" class="c-icon--left" /> My Button </c-button>

<c-button icon>
  My Button
  <c-icon name="add" class="c-icon--right" />
</c-button>
<c-button outline icon style="margin-top: 16px">
  <c-icon name="add" class="c-icon--left" />
  My Button
</c-button>

Por default, o ícone sempre será alinhado usando space-between do Flexbox, sendo jogado tando na extremidade esquerda ou direita. Para centralizar o ícone com o texto basta passar a classe c-center.

<c-button outline icon style="width: 200px;margin-top: 16px" class="c-center"> <c-icon name="add" class="c-icon--left" /> My Button </c-button>

<c-button outline icon style="width: 200px;margin-top: 16px" class="c-center">
  <c-icon name="add" class="c-icon--left" />
  My Button
</c-button>

Desabilitado

<c-button disabled> My Button </c-button> <c-button disabled outline style="margin-top: 16px"> My Button </c-button>

<c-button disabled>
  My Button
</c-button>
<c-button disabled outline style="margin-top: 16px">
  My Button
</c-button>

Carregando

<c-button loading> My Button </c-button> <c-button loading outline style="margin-top: 16px"> My Button </c-button>

<c-button loading>
  My Button
</c-button>
<c-button loading outline style="margin-top: 16px">
  My Button
</c-button>

Responsivo

<c-button full> My Button </c-button> <c-button full outline style="margin-top: 16px"> My Button </c-button>

<c-button full>
  My Button
</c-button>
<c-button full outline style="margin-top: 16px">
  My Button
</c-button>

Button API

Para utilizar o CButton é preciso primeiro importar o componente.

import { CButton } from '@estrategiahq/coruja-web-ui';

Props

A props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
type	string	button	O tipo do botão, podendo ser submit, reset ou button.
secondary	boolean	false	Define se o botão tem o estilo secondary.
outline	boolean	false	Define se o botão tem o estilo outline.
cta	boolean	false	Define se o botão tem o estilo cta.
size	string	md	Tamanho do botão, podendo ser lg, md e sm.
color	string	primary	Define as cores dos botões, podendo ser primary, green, orange, red e gray.
disabled	boolean	false	Se o botão se encontra desabilitado.
loading	boolean	false	Se o botão se encontra desabilitado.
full	boolean	false	Se o botão se encontra desabilitado.

Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos definidos os seguintes slots:

Nome	Descrição
default	Slot padrão do Vue.
icon	Define um ícone, após o conteúdo do botão e define também as props: color e size.

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@click	function	Emitido quando o componente é clicado.