Magic button

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

ariaLabel

Atributo	aria-label
Descrição	Define o rótulo acessível usado por tecnologias assistivas.
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 generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

density

Atributo	density
Descrição	Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento). - medium: Densidade intermediária, padrão recomendado para a maioria dos casos. - large: Baixa densidade (componente maior, mais espaçamento e altura).
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 de <br-magic-button> (1.x → 2.x)

A API principal do magic button permaneceu compatível. A mudança relevante é que tooltip não é mais configurado por propriedades próprias.

Propriedades

API 1.x	API 2.x	Ação na migração
label, icon, density, circle, ariaLabel	mesmos nomes	Mantenha.
tooltipText, tooltipPlace, tooltipType, tooltipTimer	—	Remova e componha um br-tooltip separado, se necessário.

Exemplo

1.x:

<br-magic-button label="Ajuda" icon="question" tooltip-text="Abrir ajuda"></br-magic-button>

2.x:

<br-tooltip>
  <br-magic-button label="Ajuda" icon="question"></br-magic-button>
  <span slot="content">Abrir ajuda</span>
</br-tooltip>