MaskedValue
Exibe um valor sensível mascarado com botão de revelar/ocultar.
Carregando...
Instalação
npx @kobana/ui add masked-valueDependências instaladas automaticamente: button (shadcn/ui), lucide-react
Importação
import { MaskedValue } from "@/components/kobana/masked-value"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
value | string | — | Valor sensível a ser exibido/ocultado |
visibleChars | number | 4 | Quantidade de caracteres visíveis no final quando mascarado |
maskChar | string | "•" | Caractere usado para mascarar |
className | string | — | Classes adicionais aplicadas ao valor |
Uso
<MaskedValue value="kbn_sk_a1b2c3d4e5f6g7h8i9j0k1l2" />Ideal para chaves de API, tokens, números de cartão, documentos e outros dados sensíveis que devem ficar ocultos por padrão mas podem ser revelados sob demanda.