Chip

Os chips são semelhantes as tags, porém permitem aos usuários fazerem seleções, ativar/desativar e realizar outras ações. De forma simplificada, falamos que os chips são tags com interações.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

children *

ReactNode

Conteúdo interno.

selected

boolean

  • false (default)

  • true

Se true apresenta o chip em seu estado de selecionado.

disabled

boolean

  • false (default)

  • true

Se true previne que os usuários interajam com o chip.

icon

ReactNode

Conteúdo do ícone ao ser adicionado ao lado do texto do chip.

iconPosition

IconPosition

  • left (default)

  • right

Posição do ícone ao ser adicionado ao lado do texto do chip.

modifier

ChipModifier

  • none

  • inverted

Cores para contextos específicos.

Métodos

Nome (* = obrigatório)

Tipo

Descrição

onClick

(event: MouseEvent<HTMLButtonElement>, selected: boolean) => void

Função chamada quando o componente é clicado.

event é o objeto de evento do click.