Visualização não disponível para mobile
Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
O componente "Icon Button" do CliniDS é uma variante do botão padrão, projetado especificamente para ações rápidas e específicas. Ele utiliza ícones em vez de texto para representar a função do botão, proporcionando uma interface limpa e intuitiva.
Tipos de Botão (Variantes Visuais)
Botão Primario - Contained
Primary/Contained
Enabled
Hovered
Focused
Pressed
Disabled
- O Icon Button é ideal para ações onde um ícone pode comunicar a função de forma mais eficaz do que o texto, especialmente em interfaces onde o espaço é limitado. É amplamente utilizado em barras de ferramentas, menus de navegação, e para ações secundárias em formulários e outros componentes.
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.
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).
Icon Button ( C_Button)
O componente "Icon Button" do CliniDS é uma variante do botão padrão, projetado especificamente para ações rápidas e específicas. Ele utiliza ícones em vez de texto para representar a função do botão, proporcionando uma interface limpa e intuitiva.
Tipos de Botão (Variantes Visuais)
Botão Primario - Contained
Primary/Contained
Enabled
Hovered
Focused
Pressed
Disabled
- O Icon Button é ideal para ações onde um ícone pode comunicar a função de forma mais eficaz do que o texto, especialmente em interfaces onde o espaço é limitado. É amplamente utilizado em barras de ferramentas, menus de navegação, e para ações secundárias em formulários e outros componentes.
Ícones
- Os ícones devem ser escolhidos para representar claramente a ação que o botão executa. Alguns exemplos de ícones incluem:
- Editar: Ícone de lápis.
- Excluir: Ícone de lixeira.
- Favoritar: Ícone de estrela.
Icones
Por padrão usamos a biblioteca de ícones do Google, o Material Symbols and Icons.
Do's and Don'ts
✅ Ações Rápidas: Use o Icon Button para ações rápidas e repetitivas, como editar, excluir, ou favoritar itens.
✅ Interface Limpa: Ideal para interfaces onde o espaço é limitado e um ícone pode comunicar a ação de forma clara.
✅ Barras de Ferramentas e Navegação: Use em barras de ferramentas e menus de navegação para melhorar a usabilidade e economizar espaço.
🚫 Ações Complexas: Evite usar Icon Button para ações que requerem uma descrição detalhada ou onde o significado do ícone pode não ser claro.
🚫 Botões Primários: Para ações principais que requerem destaque, use um botão com texto ou um botão primário.