VOLT DESIGN SYSTEM
Blocos 7, 8 & 9: Ações, Cartões e Modais
← Retornar ao Hub do Showcase
Blocos Canônicos 7, 8 & 9

Ações, Painéis Modulares e Diálogos de Segurança

Padronização de gatilhos operacionais, apresentação de cartões com indicadores numéricos de telemetria e fluxos de confirmação defensiva via caixas de diálogo suspensas.

Bloco 7

Hierarquia de Botões de Ação

A hierarquia visual comunica imediatamente o nível de relevância e o risco de cada operação.

Variações de Escala e Botões de Ícone

Bloco 8

Cartões Modulares e Grades de Métricas

Composição de painéis modulares com suporte a elevação de profundidade e métricas em números gigantes (.volt-card-modular e .volt-metric-card).

Telemetria Consolidada

Saúde da Infraestrutura Volt

Disponibilidade Total

Observabilidade de nós descentralizados operando sob o barramento de eventos unificado.

Tempo de Atividade 99.99% Uptime ininterrupto
Latência p99 24ms Percentil de cauda
Mensagens / Seg 14.8k Taxa de transferência
Taxa de Erro 0.01% Desvios tolerados
Bloco 9

Diálogos Modais e Notificações de Alerta

Janelas de diálogo com backdrop de desfoque óptico e alertas semânticos contextuais.

Alertas Semânticos Contextuais (.volt-alert)

Informativo: Nova sincronização de tokens executada com sucesso a partir do repositório soberano.
Sucesso Operacional: Todos os 4 motores responderam positivamente à sonda de integridade estática.
Aviso Preventivo: A latência de comunicação no nó regional ultrapassou o limiar de 300ms.
Alerta de Risco: O cluster detectou tentativa de uso de emojis ou cores não-autorizadas fora do SSOT.

Diálogo Modal Defensivo (.volt-modal-dialog)

Acione o botão para visualizar a abertura do modal de confirmação crítica com backdrop de 12px de desfoque.

Contrato de Integração Downstream (Demanda 2308)

Template ERB para modal de captura ou confirmação em app/views/components/_lead_modal.erb:

<div id="<%= modal_id %>" class="volt-modal-backdrop"> <div class="volt-modal-dialog"> <div class="volt-modal-header"> <h3 class="font-display text-xl font-bold text-volt-ink"><%= dialog_title %></h3> <button type="button" class="volt-modal-close" data-action="close">&times;</button> </div> <div class="volt-modal-body"> <%= yield %> </div> <div class="volt-modal-footer"> <button type="button" class="volt-btn volt-btn-secondary"><%= cancel_button_label %></button> <button type="button" class="volt-btn volt-btn-primary"><%= confirm_button_label %></button> </div> </div> </div>