Visualização não disponível para mobile
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
- Uso: Ação principal em uma interface ou fluxo.
- Estilo: Fundo sólido com texto claro.
- Cor padrão: Laranja Clinicorp.
- Destaque: Deve ser usado com parcimônia — apenas um por tela ou bloco de ação.
Primary/Outlined - Secondary
Primary/Outlined - Secondary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
- Uso: Ações de apoio ou alternativas que não são o foco principal.
- Estilo: Sem preenchimento, com borda colorida.
- Ideal para situações em que o botão precisa existir, mas sem competir com o primário.
Primary/Text - Tertiary
Primary/Text - Tertiary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
- Uso: Ações de menor peso, como links contextuais ou comandos menos importantes.
- Estilo: Apenas texto com leve destaque na cor.
- Pode ser usado como link em fluxos leves ou áreas com alto volume de conteúdo.
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
- Os botões podem conter ícones à esquerda ou à direita do texto.
- Utilize Material Icons como padrão.
- Recomenda-se usar ícones quando eles ajudarem a reforçar a ação, evitando redundância visual.
Icones
Por padrão usamos a biblioteca de ícones do Google, o Material Symbols and Icons.
Botões com Ação de Carregamento (Loading)
- Todos os botões suportam o estado de carregamento, exibindo um spinner.
- Durante o loading:
- O botão fica desabilitado
- O ícone de carregamento pode substituir ou ser exibido ao lado do texto.
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).
Button ( C_Button)
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
- Uso: Ação principal em uma interface ou fluxo.
- Estilo: Fundo sólido com texto claro.
- Cor padrão: Laranja Clinicorp.
- Destaque: Deve ser usado com parcimônia — apenas um por tela ou bloco de ação.
Primary/Outlined - Secondary
Primary/Outlined - Secondary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
- Uso: Ações de apoio ou alternativas que não são o foco principal.
- Estilo: Sem preenchimento, com borda colorida.
- Ideal para situações em que o botão precisa existir, mas sem competir com o primário.
Primary/Text - Tertiary
Primary/Text - Tertiary
Enabled
Hovered
Focused
Pressed
Disabled
Label
Label
Label
Label
Item 4
- Uso: Ações de menor peso, como links contextuais ou comandos menos importantes.
- Estilo: Apenas texto com leve destaque na cor.
- Pode ser usado como link em fluxos leves ou áreas com alto volume de conteúdo.
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
- Os botões podem conter ícones à esquerda ou à direita do texto.
- Utilize Material Icons como padrão.
- Recomenda-se usar ícones quando eles ajudarem a reforçar a ação, evitando redundância visual.
Icones
Por padrão usamos a biblioteca de ícones do Google, o Material Symbols and Icons.
Botões com Ação de Carregamento (Loading)
- Todos os botões suportam o estado de carregamento, exibindo um spinner.
- Durante o loading:
- O botão fica desabilitado
- O ícone de carregamento pode substituir ou ser exibido ao lado do texto.
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).