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

Abaixo estão as variações visuais disponíveis para diferentes contextos de interface.

Primary

Ação principal da página. Fundo sólido com alto contraste.

Button Button Button

Secondary

Ações de suporte. Contorno (outline) com texto colorido.

Button Button Button

Tertiary

Ações discretas. Sem fundo ou borda, apenas texto e ícone opcional.

Button Button Button

Accent

Destaque específico ou alertas (ex: cor de destaque da marca).

Button

Link

Utilizado para navegação inline ou menus de baixa prioridade.

Link

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>