Button

O componente Button é usado para acionar uma ação ou evento, como enviar um formulário, abrir uma caixa de diálogo, cancelar uma ação ou executar uma operação de exclusão.

Importação

import { Button } from '@escaletech/delta'

Utilização

Editor de código

<Button>Button</Button>

<Button>Button</Button>

Resultado

Loading...

Tamanhos de Botão

Use a propriedade size para alterar o tamanho do botão.

Você também pode passar a propriedade fullWidth para o botão ocupar toda a largura de seu contêiner.

Editor de código

<> <Button size="small" variant='secondary'>Button</Button> <hr /> <Button size="medium" variant='secondary'>Button</Button> <hr /> <Button size="large" variant='secondary'>Button</Button> <hr /> <Button fullWidth variant='secondary'>Button</Button> </>

<>
  <Button size="small" variant='secondary'>Button</Button>
  <hr />
  <Button size="medium" variant='secondary'>Button</Button>
  <hr />
  <Button size="large" variant='secondary'>Button</Button>
  <hr />
  <Button fullWidth variant='secondary'>Button</Button>
</>

Resultado

Loading...

Variantes de Botão

Use a propriedade variant para alterar o estilo visual do Botão. Você pode definir o valor como primary ou secondary.

Editor de código

<> <Button variant="primary"> Button </Button> <hr /> <Button variant="secondary"> Button </Button> <hr /> <Button variant="tertiary"> Button </Button> </>

<>
  <Button variant="primary">
    Button
  </Button>
  <hr />
  <Button variant="secondary">
    Button
  </Button>
  <hr />
  <Button variant="tertiary">
    Button
  </Button>
</>

Resultado

Loading...

Outlined

Você pode alterar o estilo completo para um Button com borda com a propriedade outlined.

Editor de código

<> <Button variant="primary" outlined> Button </Button> <hr /> <Button variant="secondary" outlined> Button </Button> <hr /> <Button variant="tertiary" outlined> Button </Button> </>

<>
  <Button variant="primary" outlined>
    Button
  </Button>
  <hr />
  <Button variant="secondary" outlined>
    Button
  </Button>
  <hr />
  <Button variant="tertiary" outlined>
    Button
  </Button>
</>

Resultado

Loading...

Botão com ícone

Você pode adicionar ícones ao componente Botão usando a propriedade icon.

Editor de código

<Button icon={<FiPhone />}> Button </Button>

<Button icon={<FiPhone />}>
  Button
</Button>

Resultado

Loading...

No exemplo acima estamos usando a popular biblioteca de icones react-icons, mas você também pode usar seus próprios ícones como no exemplo abaixo:

import { ReactComponent as MeuIcone } from 'caminho_do_svg'

<Button icon={<MeuIcone />}>
  Button
</Button>

Estado de carregamento do botão

Passe a propriedade loading para mostrar seu estado de carregamento. Por padrão, o botão mostrará um ícone giratório e um texto escrito Carregando.

Você também pode passar a propriedade loadingText para alterar o texto de carregamento e loadingIcon para alterar o ícone.

Editor de código

<> <Button loading loadingText='Enviando'> Enviar </Button> <hr /> <Button loading loadingIcon={<AiOutlineLoading3Quarters />}> Enviar </Button> <hr /> <Button loading loadingText='Carregando...' loadingIcon={<AiOutlineLoading3Quarters />}> Enviar </Button> </>

<>
  <Button loading loadingText='Enviando'>
    Enviar
  </Button>

  <hr />

  <Button loading loadingIcon={<AiOutlineLoading3Quarters />}>
    Enviar
  </Button>

  <hr />

  <Button loading loadingText='Carregando...' loadingIcon={<AiOutlineLoading3Quarters />}>
    Enviar
  </Button>
</>

Resultado

Loading...

Botão desabilitado

Passe a propriedade disabled para mostrar que o botão está desabilitado. Por padrão é false.

Editor de código

<> <Button disabled> Desabilitado </Button> <hr /> <Button variant="secondary" disabled> Desabilitado </Button> <hr /> <Button variant="tertiary" disabled> Desabilitado </Button> </>

  <>
    <Button disabled>
      Desabilitado
    </Button>
    <hr />
    <Button variant="secondary" disabled>
      Desabilitado
    </Button>
    <hr />
    <Button variant="tertiary" disabled>
      Desabilitado
    </Button>
  </>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    // customiza as cores de fundo e texto do componente Button
    buttonPrimaryBackgroundColor: 'red',
    buttonPrimaryColor: 'white'
  },
  fonts: {
    // customiza a familia de fonte do componente Button
    buttonFontFamily: 'Georgia'
  }
})

Tokens

Token	Descrição
fonts.buttonFontFamily	Fonte do botão
fontSizes.buttonFontSize	Tamanho da fonte do botão
fontWeights.buttonFontWeight	Peso da fonte do botão
radii.buttonBorderRadius	Raio da borda do botão
borderWidths.buttonPrimaryBorderWidth	Tamanho da espessura de borda do botão primário
borderWidths.buttonPrimaryBorderWidthHover	Tamanho da espessura de borda do botão primário quando o mouse está em cima
borderWidths.buttonPrimaryBorderWidthActive	Tamanho da espessura de borda do botão primário quando está ativo
borderWidths.buttonPrimaryBorderWidthDisabled	Tamanho da espessura de borda do botão primário quando está desabilitado
borderWidths.buttonSecondaryBorderWidth	Tamanho da espessura de borda do botão secundário
borderWidths.buttonSecondaryBorderWidthHover	Tamanho da espessura de borda do botão secundário quando o mouse está em cima
borderWidths.buttonSecondaryBorderWidthActive	Tamanho da espessura de borda do botão secundário quando está ativo
borderWidths.buttonSecondaryBorderWidthDisabled	Tamanho da espessura de borda do botão secundário quando está desabilitado
borderWidths.buttonTertiaryBorderWidth	Tamanho da espessura de borda do botão terciário
borderWidths.buttonTertiaryBorderWidthHover	Tamanho da espessura de borda do botão terciário quando o mouse está em cima
borderWidths.buttonTertiaryBorderWidthActive	Tamanho da espessura de borda do botão terciário quando está ativo
borderWidths.buttonTertiaryBorderWidthDisabled	Tamanho da espessura de borda do botão terciário quando está desabilitado
colors.buttonPrimaryBackgroundColor	Cor de fundo do botão primário
colors.buttonPrimaryBackgroundColorHover	Cor de fundo do botão primário quando o mouse está em cima
colors.buttonPrimaryBackgroundColorActive	Cor de fundo do botão primário quando está ativo
colors.buttonPrimaryBackgroundColorDisabled	Cor de fundo do botão primário quando está desabilitado
colors.buttonPrimaryBorderColor	Cor da borda do botão primário
colors.buttonPrimaryBorderColorHover	Cor da borda do botão primário quando o mouse está em cima
colors.buttonPrimaryBorderColorActive	Cor da borda do botão primário quando está ativo
colors.buttonPrimaryBorderColorDisabled	Cor da borda do botão primário quando está desabilitado
colors.buttonPrimaryColor	Cor da fonte do botão primário
colors.buttonPrimaryColorHover	Cor da fonte do botão primário quando o mouse está em cima
colors.buttonPrimaryColorActive	Cor da fonte do botão primário quando está ativo
colors.buttonPrimaryColorDisabled	Cor da fonte do botão primário quando está desabilitado
colors.buttonSecondaryBackgroundColor	Cor de fundo do botão secundário
colors.buttonSecondaryBackgroundColorHover	Cor de fundo do botão secundário quando o mouse está em cima
colors.buttonSecondaryBackgroundColorActive	Cor de fundo do botão secundário quando está ativo
colors.buttonSecondaryBackgroundColorDisabled	Cor de fundo do botão secundário quando está desabilitado
colors.buttonSecondaryBorderColor	Cor da borda do botão secundário
colors.buttonSecondaryBorderColorHover	Cor da borda do botão secundário quando o mouse está em cima
colors.buttonSecondaryBorderColorActive	Cor da borda do botão secundário quando está ativo
colors.buttonSecondaryBorderColorDisabled	Cor da borda do botão secundário quando está desabilitado
colors.buttonSecondaryColor	Cor da fonte do botão secundário
colors.buttonSecondaryColorHover	Cor da fonte do botão secundário quando o mouse está em cima
colors.buttonSecondaryColorActive	Cor da fonte do botão secundário quando está ativo
colors.buttonSecondaryColorDisabled	Cor da fonte do botão secundário quando está desabilitado
colors.buttonTertiaryBackgroundColor	Cor de fundo do botão terciário
colors.buttonTertiaryBackgroundColorHover	Cor de fundo do botão terciário quando o mouse está em cima
colors.buttonTertiaryBackgroundColorActive	Cor de fundo do botão terciário quando está ativo
colors.buttonTertiaryBackgroundColorDisabled	Cor de fundo do botão terciário quando está desabilitado
colors.buttonTertiaryBorderColor	Cor da borda do botão terciário
colors.buttonTertiaryBorderColorHover	Cor da borda do botão terciário quando o mouse está em cima
colors.buttonTertiaryBorderColorActive	Cor da borda do botão terciário quando está ativo
colors.buttonTertiaryBorderColorDisabled	Cor da borda do botão terciário quando está desabilitado
colors.buttonTertiaryColor	Cor da fonte do botão terciário
colors.buttonTertiaryColorHover	Cor da fonte do botão terciário quando o mouse está em cima
colors.buttonTertiaryColorActive	Cor da fonte do botão terciário quando está ativo
colors.buttonTertiaryColorDisabled	Cor da fonte do botão terciário quando está desabilitado

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
icon	Adiciona um ícone no botão	JSX.Element	-	❌
disabled	Se for true, o botão será desabilitado.	boolean	false	❌
outlined	Se for true, o botão fica com borda e fundo transparente.	boolean	false	❌
fullWidth	Se for true, o botão ocupará toda a largura de seu contêiner.	boolean	false	❌
loading	Se for true, o botão mostrará um botão giratório.	boolean	false	❌
loadingIcon	Define o ícone exibido no carregamento do botão	JSX.Element	-	❌
loadingText	Define o texto de carregamento do botão	string	Carregando	❌
size	Define o tamanho do botão	string	medium	❌
variant	Define o estilo visual do Botão	string	primary	❌

Aceita todos as propriedades suportados por botões nativos.