Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
Os botões são elementos essenciais de interação no Design System da Clinicorp. Eles têm como principal objetivo iniciar ações e devem ser usados de forma clara, intuitiva e consistente ao longo do produto. Os botões reforçam hierarquias visuais e ajudam o usuário a entender o que pode ser feito em cada contexto.
Tipos de Botão (Variantes Visuais)
Botão Primario - Contained
Primary/Contained
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Primary/Outlined - Secondary
Primary/Outlined - Secondary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Primary/Text - Tertiary
Primary/Text - Tertiary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Cores e Significados
As cores refletem intenção e status. Use com cautela para manter a coerência visual e semântica.
Cor
Uso recomendado
Laranja Clinicorp (default)
Ações padrão da interface
Success (verde)
Sucesso, confirmação, "ok"
Warning (amarelo)
Avisos ou ações que exigem atenção
Danger (vermelho)
Exclusão, risco, ações críticas
Info (azul)
Informação secundária ou neutra
Cosmos (roxo)
Uso exclusivo para produtos relacionados à Clinicorp IA
Atenção
Cores com status devem ser usadas apenas quando o botão representar uma ação contextual relacionada ao status da interface ou conteúdo.
Ver documentação de cores
Exemplos de uso
Tamanhos e Layout
Os botões possuem três tamanhos padronizados:
Tamanho
Altura
Uso recomendado
Small
30px
Ações sutis, áreas compactas
Medium
36px
Uso padrão em toda a interface
Large
46px
Destaque visual, como formulários ou CTA
Small
Medium
Large
Label
Label
Label
Largura
Por padrão, os botões ajustam à largura do conteúdo. Quando necessário, podem ser usados em full width para ocupar o espaço total disponível, especialmente em mobile ou formulários.
Botões com Ícones
Icones
Por padrão usamos a biblioteca de ícones do Google, o Material Symbols and Icons.
Botões com Ação de Carregamento (Loading)
Do's and Don'ts
✅ Use apenas um botão primário por contexto.
✅ Mantenha consistência no uso das cores para comunicar a intenção.
✅ Sempre que possível, use texto claro e objetivo (ex: "Salvar", "Continuar", "Cancelar").
🚫 Misturar múltiplas cores de status na mesma tela sem motivo funcional.
🚫 Usar botão Outlined ou Text para ações críticas.
🚫 Exibir botão desabilitado sem explicação (forneça contexto ou dica).
Os botões são elementos essenciais de interação no Design System da Clinicorp. Eles têm como principal objetivo iniciar ações e devem ser usados de forma clara, intuitiva e consistente ao longo do produto. Os botões reforçam hierarquias visuais e ajudam o usuário a entender o que pode ser feito em cada contexto.
Tipos de Botão (Variantes Visuais)
Botão Primario - Contained
Primary/Contained
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Primary/Outlined - Secondary
Primary/Outlined - Secondary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Primary/Text - Tertiary
Primary/Text - Tertiary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
Cores e Significados
As cores refletem intenção e status. Use com cautela para manter a coerência visual e semântica.
Cor
Uso recomendado
Laranja Clinicorp (default)
Ações padrão da interface
Success (verde)
Sucesso, confirmação, "ok"
Warning (amarelo)
Avisos ou ações que exigem atenção
Danger (vermelho)
Exclusão, risco, ações críticas
Info (azul)
Informação secundária ou neutra
Cosmos (roxo)
Uso exclusivo para produtos relacionados à Clinicorp IA
Atenção
Cores com status devem ser usadas apenas quando o botão representar uma ação contextual relacionada ao status da interface ou conteúdo.
Ver documentação de cores
Exemplos de uso
Tamanhos e Layout
Os botões possuem três tamanhos padronizados:
Tamanho
Altura
Uso recomendado
Small
30px
Ações sutis, áreas compactas
Medium
36px
Uso padrão em toda a interface
Large
46px
Destaque visual, como formulários ou CTA
Small
Medium
Large
Label
Label
Label
Largura
Por padrão, os botões ajustam à largura do conteúdo. Quando necessário, podem ser usados em full width para ocupar o espaço total disponível, especialmente em mobile ou formulários.
Botões com Ícones
Icones
Por padrão usamos a biblioteca de ícones do Google, o Material Symbols and Icons.
Botões com Ação de Carregamento (Loading)
Do's and Don'ts
✅ Use apenas um botão primário por contexto.
✅ Mantenha consistência no uso das cores para comunicar a intenção.
✅ Sempre que possível, use texto claro e objetivo (ex: "Salvar", "Continuar", "Cancelar").
🚫 Misturar múltiplas cores de status na mesma tela sem motivo funcional.
🚫 Usar botão Outlined ou Text para ações críticas.
🚫 Exibir botão desabilitado sem explicação (forneça contexto ou dica).