Tags ( C_Tags)
Components
/
Tabs
Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
Components
/
Tabs
Tag Primaria
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
O componente Tag passará por reestruturação em breve e poderá se chamar Chip.
Hoje Tag e Chip possuem usos diferenciados. Sendo o Chip com uso exclusivo na Agenda.
Visão geral
A tag de status é um pequeno elemento visual que comunica informações de status de forma compacta e eficiente. Elas são usadas para indicar estados, processos ou informações contextuais em uma interface. As tags são úteis para fornecer feedback visual imediato ao usuário e podem ser utilizadas em diversas situações, como indicar sucesso, erro, informações pendentes, etc.
Tag Primaria (Hover)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Primaria (Active)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária (Hover)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária (Active)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Do's and Don'ts
✅ Use rótulos curtos e significativos.
✅ Priorize a ordem de uso esperado ou importância.
✅ Indique claramente a aba ativa.
✅ Utilize animação sutil na transição para reforçar a mudança de contexto.
🚫 Nunca usar a tag laranja
🚫 Não indicar qual aba está ativa.
🚫 Usar rótulos genéricos como "Aba 1", "Seção A".
Acessibilidade
Decisões de design
Components
/
Tabs
Visão geral
A tag de status é um pequeno elemento visual que comunica informações de status de forma compacta e eficiente. Elas são usadas para indicar estados, processos ou informações contextuais em uma interface. As tags são úteis para fornecer feedback visual imediato ao usuário e podem ser utilizadas em diversas situações, como indicar sucesso, erro, informações pendentes, etc.
O componente Tag passará por reestruturação em breve e poderá se chamar Chip.
Hoje Tag e Chip possuem usos diferenciados. Sendo o Chip com uso exclusivo na Agenda.
Tag Primaria
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Primaria (Hover)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Primaria (Active)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária (Hover)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Tag Secundária (Active)
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Do's and Don'ts
✅ Use rótulos curtos e significativos.
✅ Priorize a ordem de uso esperado ou importância.
✅ Indique claramente a aba ativa.
✅ Utilize animação sutil na transição para reforçar a mudança de contexto.
🚫 Nunca usar a tag laranja
🚫 Não indicar qual aba está ativa.
🚫 Usar rótulos genéricos como "Aba 1", "Seção A".
Acessibilidade
Decisões de design