# Component Snippets ## PharmData Design System - Componentes Prontos para Uso > **Copiar e colar**: Todos os snippets abaixo são completos e prontos para uso --- ## Índice 1. [Buttons](#buttons) 2. [Cards](#cards) 3. [Forms](#forms) 4. [Tables](#tables) 5. [Badges & Drops](#badges--drops) 6. [Alerts](#alerts) 7. [Layout](#layout) 8. [Navigation](#navigation) --- ## Buttons ### Button Primary **Visual**: Botão sólido teal para ações principais ```html ``` **Acessibilidade**: - Focus ring com 2px offset - Color contrast ratio: 4.5:1 (WCAG AA) - Support para navegação via teclado --- ### Button Secondary **Visual**: Botão outline para ações secundárias ```html ``` --- ### Button Ghost / Text Only **Visual**: Botão texto para ações terciárias ```html ``` --- ### Button Icon Only **Visual**: Botão circular apenas com ícone ```html ``` **Acessibilidade**: - `aria-label` obrigatório para screen readers - Tamanho mínimo de 40x40px (WCAG 2.5.5) --- ### Button Group **Visual**: Grupo de botões relacionados ```html

``` --- ### Button Loading State **Visual**: Botão com spinner durante carregamento ```html ``` --- ## Cards ### Basic Card **Visual**: Card branco com borda sutil ```html

Paracetamol

Substância ativa analgésica e antipirética

SUB-082615 Approved

``` --- ### Card with Header **Visual**: Card com cabeçalho destacado ```html

Substância #SUB-082615

Nome

Paracetamol

Fórmula

C₈H₉NO₂

``` --- ### Card with Action **Visual**: Card clicável com ação ```html

Paracetamol

C₈H₉NO₂

Complete Approved

``` **Acessibilidade**: - Elemento `` semântico para navegação - Focus state visível - Hover state claro --- ### Property Grid Card **Visual**: Card para exibir propriedades em grade ```html

Propriedades Físico-Químicas

Massa Molecular 151.17 g/mol

Ponto de Fusão 168-172°C

Solubilidade 14 g/L (água, 25°C)

LogP 0.46

``` --- ## Forms ### Input Text **Visual**: Campo de texto padrão ```html

Nome da Substância *

Nome oficial da substância conforme SNOMED CT

``` **Acessibilidade**: - `` associado via `for`/`id` - `aria-required` para campos obrigatórios - Texto de ajuda com `text-caption` --- ### Select / Dropdown **Visual**: Seletor dropdown ```html

Status de Validação

``` --- ### Textarea **Visual**: Campo de texto multilinha ```html

Notas de Curadoria

Estas notas serão auditadas e rastreadas

``` --- ### Checkbox **Visual**: Checkbox com label ```html

Confirmo que todos os dados foram verificados

Esta validação impactará prescrições médicas

``` --- ### Radio Group **Visual**: Grupo de radio buttons ```html

Nível de Confiança

Validação Completa

Dados verificados em fontes primárias

Validação Parcial

Campos principais verificados

``` --- ### Form Complete Example **Visual**: Formulário completo com Progressive Disclosure ```html ``` --- ## Tables ### Simple Table **Visual**: Tabela responsiva básica ```html

ID	Nome	Status	Qualidade
SUB-082615	Paracetamol	Approved	Complete
SUB-123456	Ibuprofeno	In Review	Partial

``` --- ### Table with Actions **Visual**: Tabela com botões de ação ```html

Substância	Status	Ações
Paracetamol C₈H₉NO₂	Approved

``` --- ## Badges & Drops Ver `pharmdata-tokens.css` para classes completas. Aqui estão os snippets de uso: ```html DEC-123456 SUB-082615 BAYER Comprimido Draft In Review Approved Complete Partial Missing SPOR/EMA ANVISA ``` --- ## Alerts ### Info Alert ```html

Informação

Este registro será sincronizado com SPOR/EMA

``` ### Success Alert ```html

Sucesso!

Substância validada com sucesso

``` ### Warning Alert ```html

Atenção

Alguns campos opcionais não foram preenchidos

``` ### Error Alert ```html

Erro de Validação

Fórmula molecular inválida

``` --- ## Layout ### Container ```html

``` ### Grid Layout (2 colunas) ```html

``` ### Sidebar Layout ```html

``` --- ## Navigation ### Header ```html

Pharm^data

Curadoria de Dados

``` ### Breadcrumbs ```html ``` --- **Notas de Acessibilidade**: - Todos os componentes seguem WCAG AAA - Focus states visíveis em todos os interativos - Semântica HTML correta - Aria-labels onde necessário

Paracetamol

Substância #SUB-082615

Paracetamol

Propriedades Físico-Químicas

Identificação

Informação

Sucesso!

Atenção

Erro de Validação