Button Botão
Introdução
O componente Button é um elemento clicável flexível e altamente interativo usado para acionar ações, enviar formulários ou redefinir entradas. Projetado com valores estáticos padrão sem JavaScript, ele suporta nativamente múltiplas variantes visuais, escalonamento de tamanho e temas de destaque.
Para configurações avançadas, os botões podem ser configurados com estados de indicador de carregamento ou incorporados com campos de execução de JavaScript bruto e personalizado (onclick) para executar comportamentos personalizados instantaneamente, sem depender de uma carga de hidratação completa do cliente.
Uso
Você pode construir e estilizar botões como abaixo:
Botão de ação básico
Um botão clássico de chamada à ação principal, estilizado com preenchimentos sólidos ou estilos de contorno padrão.
{
"blockType": "button",
"text": "Get Started",
"variant": "solid",
"colorPalette": "blue"
}
Botão de envio de formulário
Em layouts de página com campos de formulário interativos (como campos de texto dentro de um Fieldset), configure o tipo de ação do botão como "submit". Isso garante que o formulário pai capture o evento e envie os campos corretamente.
{
"blockType": "button",
"text": "Submit Registration",
"buttonType": "submit",
"variant": "solid",
"colorPalette": "green"
}
Botão com script de cliente em linha (avançado)
Para interações instantâneas como alternar sobreposições, rolagem suave ou disparar eventos personalizados sem hidratar a página inteira, forneça um trecho de JavaScript bruto no campo onclick.
{
"blockType": "button",
"text": "Notify System",
"variant": "outline",
"onclick": "window.dispatchEvent(new CustomEvent('park-ui:toast:create', { detail: { title: 'Action Registered' } }))"
}
Botões agrupados
Renderize múltiplos botões complementares lado a lado ou unidos como um segmento coeso e contíguo. No construtor de páginas CMS, aninhar blocos button dentro de um bloco contêiner (como um bloco Group com attached ativado) funde suas bordas perfeitamente.
{
"blockType": "group",
"attached": true,
"children": [
{
"blockType": "button",
"text": "Previous",
"variant": "outline"
},
{
"blockType": "button",
"text": "Next",
"variant": "outline"
}
]
}
Propriedades
| Parâmetro | Tipo | Padrão | Descrição |
|---|---|---|---|
text | String | - | O rótulo de texto renderizado dentro do botão. |
variant | Select | solid | O estilo visual do botão. Opções: solid, outline, subtle, surface, plain. |
size | Select | md | Tamanho de escala do padding e da tipografia do botão. Opções: xs, sm, md, lg. |
buttonType | Select | button | O tipo de ação HTML. Opções: button, submit, reset. (Mapeado a partir do atributo HTML nativo type para evitar conflitos de esquema nos construtores CMS). |
colorPalette | Select | - | Tema de cor visual para acentos de fundo/borda. Opções: blue, green, red, purple, orange, amber, cyan, slate. |
onclick | String | - | Expressão JavaScript bruta executada instantaneamente ao clicar. Executa sem exigir cargas de hidratação do cliente. |
Notas de arquitetura
- Prevenção de colisões: O campo de configuração do CMS usa a chave
buttonTypeem vez detype. Isso evita que os editores visuais do construtor de páginas confundam o tipo de botão HTML com o discriminador de bloco interno (blockType) do sistema. - Execuções imediatas: Fornecer scripts em
onclickescreve um manipulador de eventos bruto diretamente no markup HTML renderizado no servidor. Isso é extremamente performático, pois a lógica é executada totalmente em linha sem que o navegador precise baixar, analisar e anexar ouvintes JS durante a hidratação. - Acessibilidade: Comportamentos padrão de teclado (focar via Tab, ativar via Space ou Enter) são nativos da tag de botão HTML base do navegador e não exigem manipuladores ARIA personalizados.