Magic button
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível usado por tecnologias assistivas. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam ariaLabel. |
| 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 do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| 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). |
"icon" | Ícone customizado do botão. Quando utilizado, a prop icon é ignorada. |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"button" | Elemento button interno. |
"container" | Wrapper principal do magic-button. |
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 | — |