Alerta

Um alerta diz ao leitor algo sobre a página ou sobre uma ação que acabou de fazer. A cor escolhe ao mesmo tempo o ícone e o papel ARIA: danger e warning anunciam-se como role="alert"; tudo o que for mais calmo é um role="status" educado.

Cores

Atenção
Está disponível uma nova versão do sitelo.
Publicado
169 páginas publicadas em 1,7 segundos.
Nota
As ilhas estão desativadas neste projeto.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Atenção' }, 'Está disponível uma nova versão do sitelo.'),
  alert({ color: 'success', title: 'Publicado' }, '169 páginas publicadas em 1,7 segundos.'),
  alert({ color: 'warning', title: 'Página lenta' }, 'Uma página demorou mais de 500 ms a renderizar.'),
  alert({ color: 'danger', title: 'Construção falhou' }, 'Duas ligações internas apontam para páginas que não existem.'),
  alert({ color: 'neutral', title: 'Nota' }, 'As ilhas estão desativadas neste projeto.'),
)

Sem título

Um alerta de uma linha não precisa de um cabeçalho por cima da frase.

Guardado.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Guardado.'),
  alert({ color: 'danger' }, 'Esse endereço de email já está em uso.'),
)

Variantes

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'A predefinição — uma superfície tingida.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Transparente, com um contorno colorido.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'A cor cheia da paleta, para o que não pode passar despercebido.'),
)

Ícones

Cada cor tem um ícone predefinido. Passa a tua própria marcação em icon, ou icon: false para nenhum.

Sem ícone
Apenas o texto.
Um ícone próprio
Serve qualquer SVG — os ícones são marcação, não uma dependência.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Sem ícone' }, 'Apenas o texto.'),
  alert({
    color: 'primary',
    title: 'Um ícone próprio',
    icon: icon('star'),
  }, 'Serve qualquer SVG — os ícones são marcação, não uma dependência.'),
)

Dispensável

O botão de fechar traz o seu próprio handler:

onclick="import('/su/alert.js').then(m=>m.dismiss(this))"

Por isso o alerta abaixo fecha mesmo, sem que esta página importe seja o que for. Se esse módulo nunca chegar, o botão desenha-se e não faz nada — razão pela qual um alerta nunca deve ser o único sítio onde uma mensagem aparece.

Dispensável
Carrega no × — o handler vai buscar-se a si próprio ao primeiro toque.
alert({ color: 'primary', title: 'Dispensável', dismissible: true },
  'Carrega no × — o handler vai buscar-se a si próprio ao primeiro toque.',
)

Conteúdo rico

Os alertas aceitam quaisquer filhos, por isso uma ação ou uma lista pode viver lá dentro.

alert({ color: 'danger', title: 'Verificação de ligações falhou' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Duas ligações apontam para páginas que não foram geradas:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'ligado a partir de /docs' }),
      listItem({ title: '/blog/draft', description: 'ligado a partir de /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Ver detalhes'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Ignorar'),
    ),
  ),
)

Props

PropTipoPredefiniçãoDescrição
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Escolhe a paleta, o ícone predefinido e o papel ARIA.
variant'soft' | 'outline' | 'solid''soft'Quanto peso o alerta carrega.
titleChild—Primeira linha a negrito.
iconChild | false—Marcação de ícone própria, ou false para nenhum.
dismissiblebooleanfalseAcrescenta um botão de fechar que importa o seu próprio handler.
dismissLabelstring'Dismiss'Nome acessível desse botão.