Tag

Display

Inline label with intent colors, appearance variants and removable option.

Instalação via CLI

$ npx kikitocn add tag

Exemplo de uso

TagExample.tsx

import { Tag } from "@/components/ui/cn/tag/Tag";

export function TagExample() {
  return (
    <Tag intent="primary" appearance="soft">
      Tag
    </Tag>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Texto ou conteúdo da tag
`intent`	`'primary' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'neutral'`	Cor do intent
`appearance`	`'soft' \| 'solid' \| 'outline'`	`'soft'`	Estilo visual
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho
`icon`	`React.ReactNode`	—	Ícone à esquerda
`removable`	`boolean`	`false`	Exibir botão de remover
`onRemove`	`() => void`	—	Callback ao remover
`onClick`	`() => void`	—	Torna a tag clicável
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Display

Carregando…