aperte s para abrir a busca
Storybook Storybook
v1.81.11

# CTag

O componente CTag permite a exibição de textos englobados por um fundo de bordas arredondadas

# Exemplo simples

Concurso polícia civil - SP
Advogado Tributário
<div class="c-d-flex">
  <c-tag>Concurso polícia civil - SP</c-tag>
  <c-tag style="margin-left: 16px">Advogado Tributário</c-tag>
</div>

# Exemplo com outras cores

As cores são configuradas a partir das propriedades textColor e backgroundColor.

Concurso polícia civil - SP
Policia Militar
Policia Federal - DF 
<div class="c-d-flex">
  <c-tag
    background-color="rgba(247, 223, 238)"
    text-color="rgba(247, 17, 163)"
  >
    Concurso polícia civil - SP
  </c-tag>
  <c-tag
    background-color="rgba(193, 244, 247)"
    text-color="rgba(0, 131, 138)"
    style="margin-left: 16px"
  >
    Policia Militar
  </c-tag>
  <c-tag
    background-color="rgba(91, 0, 156)"
    text-color="rgba(252, 252, 252)"
    style="margin-left: 16px"
  >
    Policia Federal - DF
  </c-tag>
</div>

# Exemplo com variações de tamanho

As variações de tamanho são definidas na prop size. Suas opções são sm, md e lg.

Concurso polícia civil - SP
Advogado Tributário
Polícia Federal - DF
<div class="c-d-flex">
  <c-tag size="sm">Concurso polícia civil - SP</c-tag>
  <c-tag size="md" style="margin-left: 16px">Advogado Tributário</c-tag>
  <c-tag size="lg" style="margin-left: 16px">Polícia Federal - DF</c-tag>
</div>

# CTag API

Para utilizar o CTag é preciso primeiro importar o componente.

import { CTag } from '@estrategiahq/coruja-web-ui';
1

# Props

NomeTipoDefaultDescrição
background-colorstringrgba(var(--c-color-primary-300-rgb), 0.24)Configura cor de fundo do CTag.
text-colorstringvar(--c-color-primary-300)Configura cor de texto do CTag
sizestringsmConfigura tamanho do CTag, as opções disponíveis são: sm, md e lg

# Slots

SlotDescrição
defaultTexto que será exibido dentro do CTag