Magic button
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Texto de acessibilidade (ARIA label). Deve ser fornecido para ícones sem texto para garantir acessibilidade. |
| Tipo | string |
| Valor padrão | '' |
circle
| Atributo | circle |
| Descrição | Define se o botão terá formato circular. Aplica contorno arredondado completo quando true e não houver label. |
| Tipo | boolean |
| Valor padrão | false |
customId
| Atributo | custom-id |
| Descrição | Identificador único. Se não for fornecido, será gerado automaticamente. |
| Tipo | string |
| Valor padrão | br-magic-button-${MagicButtonId++} |
density
| Atributo | density |
| Descrição | Densidade do botão. Define o tamanho do componente: - large para grande- medium para médio- small para pequeno |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
icon
| Atributo | icon |
| Descrição | Nome do ícone a ser exibido. Deve corresponder a um ícone disponível no sistema de ícones. |
| Tipo | string |
| Valor padrão | '' |
label
| Atributo | label |
| Descrição | Texto do rótulo do botão. Utilizado como conteúdo principal quando presente. |
| Tipo | string |
| Valor padrão | '' |
Slots
| Nome | Descrição |
|---|---|
"default" | Conteúdo interno do botão (texto ou ícone). |
Dependências
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
tooltipPlace | Posição do tooltip (e.g. top, bottom, left, right). | string | — |
tooltipText | Texto exibido no tooltip via mixin Vue (v-tooltip). | string | — |
tooltipTimer | Tempo de exibição do tooltip em milissegundos. | number | — |
tooltipType | Estilo do tooltip (e.g. info, warning). | string | — |