Cards
Os botões da Hypera Pharma seguem uma hierarquia clara de importância, dividida em 5 variantes principais e 4 escalas de tamanho.
Variantes
Section titled “Variantes”Abaixo estão as variações visuais disponíveis para diferentes contextos de interface.
Ação principal da página. Fundo sólido com alto contraste.
Ações de suporte. Contorno (outline) com texto colorido.
Ações discretas. Sem fundo ou borda, apenas texto e ícone opcional.
Destaque específico ou alertas (ex: cor de destaque da marca).
Utilizado para navegação inline ou menus de baixa prioridade.
Tamanhos
Section titled “Tamanhos”O componente suporta quatro escalas, incluindo uma versão específica para ícones solitários.
| Tamanho | Descrição | Uso Recomendado |
|---|---|---|
| Large | 56px (aprox) | Hero sections ou modais grandes. |
| Medium | 44px (aprox) | Padrão para a maioria das interfaces. |
| Small | 32px (aprox) | Tabelas, cards densos ou áreas reduzidas. |
| Icon | Quadrado | Botões de ação rápida (ex: fechar, voltar). |
<Button size="large">Large</Button><Button size="medium">Medium</Button><Button size="small">Small</Button><Button size="icon" iconPosition="none"> <Icon name="close" slot="icon-only" /></Button>