Botões

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.

Button Button Button Button Button

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="accent">Accent</Button>
<Button variant="link">Link</Button>

Tamanhos

O componente suporta quatro escalas, incluindo uma versão específica para ícones solitários.

Large Medium Small

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>

Teste de código

console.log('Hello World');