Button

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 avançar em um fluxo.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

children

ReactNode

  • —

Conteúdo em texto do botão. Um valor é necessário para exibir um texto.

Utilize string para garantir a integridade visual.

variant

ButtonVariant

  • primary (default)

  • secondary

Variante do botão. Os termos “primário” e “secundário” se referem à importância do botão no seu contexto, não se referem a cores primária e secundária da marca.

modifier

ButtonModifier

  • none (default)

  • inverted

  • premium

inverted aplica estilos para serem usados em um contexto de “fundo inverso”, i.e., um fundo colorido

premium ignora a variant e aplica estilo a serem utilizados em produtos premium da marca (e.g. apartamentos cujo proprietário é a Loft)

contextual

boolean

  • false (default)

  • true

Deve ser usado quando o botão pertence a um “contexto limitado”. Exemplos:

  • modal/diálogo

  • card

  • box

  • tabela

fullWidth

FullWidthButtonProps

  • undefined (default)

  • true

  • always

  • <breakpoint>-up

  • <breakpoint>-down

Botão ocupa toda a largura do container.

Pode ser aplicado sempre ou de acordo com breakpoints específicos, crescentes ou decrescentes.

disabled

boolean

  • false (default)

  • true

Desabilita o botão.

loading

boolean

  • false (default)

  • true

Desabilita o botão e exibe um ícone de carregamento.

icon

ReactNode

  • —

Conteúdo do ícone ao ser adicionado ao lado do texto do botão (children).

Utilize Icons da Loft para garantir a integridade.

iconPosition

IconPosition

  • left (default)

  • right

Posição do ícone ao ser adicionado ao lado do texto do botão (children).

type

string

  • button (default)

  • submit

  • reset

Ao contrário do botão nativo, o default do nosso botão é ter um comportamento simples de botão e não fazer o submit de forms.

className

string

  • —

Classe extra aplicado ao elemento raíz (<button>) do componente.

Métodos

Nome (* = obrigatório)

Tipo

Descrição

onClick

function

Função chamada quando o botão é clicado.

event é o objeto de evento do click.

Validação

O componente de Button tem algumas boas práticas de Design. Tais práticas foram utilizadas para garantir ou ajudar a garantir a utilização correta do mesmo. Essas regras são aplicadas à prop children, ou seja, ao texto que será a label do botão.

Caso alguma das regras não seja cumprida, um console.warn é disparado para ajudar o engenheiro a perceber o problema

  • Tipagem: dê preferência ao tipo string

    • Lembrando que {street}, {number} não é uma string. Isso é interpretado pelo React como um string[]

  • Capitalização: a capitalização deve ser do tipo Sentence case, onde somente a primeira letra do conteúdo inteiro é capitalizada

  • Quantidade de caracteres: máximo de 40 caracteres. Caso o conteúdo tenha mais de 40 caracteres, o botão ainda funcionará normalmente, mas o componente efetuará um console.warn com a mensagem indicativa do problema

  • Quantidade de palavras: máximo de 4 palavras