Visualização não disponível para mobile

Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.

Redo company logo

Vagas de design na Clinicorp

Todos os direitos reservados. © 2017-2025 Clinicorp

Início

Cores

Tipografia

Tom de voz

Componentes

Padrões

IA

Tags ( C_Tags)

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

  • Cada aba deve ter um foco visível (outline ou realce).
  • Use atributos aria-controls e aria-selected corretamente quando implementado.
  • Atalhos de teclado devem ser suportados: setas para navegar, tab para focar conteúdo.

Decisões de design

  • Abas com underline foram escolhidas por sua leveza e clareza.
  • O alinhamento horizontal é padrão, com variação vertical para casos com hierarquia lateral.
  • Ícones são permitidos como reforço visual, mas não substituem texto quando o significado não for óbvio.
Redo company logo

Vagas de design na Clinicorp

Todos os direitos reservados. © 2017-2025 Clinicorp

Componentes

Avatar

Badge

Chip (Tag)

Divider

Icons

List

Tooltip

Padrões

IA

Tags ( C_Tags)

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

  • Cada aba deve ter um foco visível (outline ou realce).
  • Use atributos aria-controls e aria-selected corretamente quando implementado.
  • Atalhos de teclado devem ser suportados: setas para navegar, tab para focar conteúdo.

Decisões de design

  • Abas com underline foram escolhidas por sua leveza e clareza.
  • O alinhamento horizontal é padrão, com variação vertical para casos com hierarquia lateral.
  • Ícones são permitidos como reforço visual, mas não substituem texto quando o significado não for óbvio.