Chip

Os Chip permitem ao usuário selecionar um ou mais itens de um conjunto. Assim como o Checkbox, o componente Chip utiliza o elemento input do tipo checkbox.

Importação

import { Chip } from '@escaletech/delta'

Utilização

Editor de código

<Chip label="Produtos" />

  <Chip label="Produtos" />

Resultado

Loading...

Desabilitado

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

Editor de código

<> <Chip label="Produtos" disabled/> <hr /> <Chip label="Produtos" checked disabled/> </>

<>
  <Chip label="Produtos" disabled/>
  <hr />
  <Chip label="Produtos" checked disabled/>
</>

Resultado

Loading...

Estado de carregamento

Passe a propriedade loading para mostrar que o input está com estado de carregamento. Por padrão é false.

Editor de código

<> <Chip label="Produtos" disabled loading/> <hr /> <Chip label="Produtos" checked disabled loading/> </>

<>
  <Chip label="Produtos" disabled loading/>
  <hr />
  <Chip label="Produtos" checked disabled loading/>
</>

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
    chipBackgroundColor: 'red',
  }
})

Tokens

Token	Descrição
colors.chipBackgroundColor	Cor de fundo quando o componente está selecionado
colors.chipBackgroundColorHover	Cor de fundo quando o mouse está em cima do componente
colors.chipBackgroundcolorDisable	Cor de fundo quando o componente está selecionado e desabilitado
colors.chipBackgroundcolorActive	Cor de fundo quando o componente está ativo
colors.chipBackgroundcolorLoading	Cor de fundo quando o componente está com estado de carregamento

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
label	Define o texto da label do componente	string	-	✅
loading	Se for true, o componente ficará com estado de carregamento	boolean	false	❌

Aceita todos as propriedades suportados por inputs nativos do tipo checkbox.