components
inline-notification
Banner persistente in-page pra info importante mas não-bloqueante. Diferente do toast (timed): inline fica até o usuário interagir ou dispensar.
overview
nova versão disponível
v1.1 chegou com toggle, slider e file uploader.
cuidado
essa ação vai afetar 247 registros.
dados sincronizados
tudo certo, última atualização há 2 minutos.
variantes
Mesmas 4 cores do notification base (success/error/warning/info), mas com fundo --layer-02 e sem shadow.
success
operação concluída.
error
algo deu errado.
warning
atenção a isso.
info
fyi.
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .notification--inline | class | — | variante banner (vs toast/notification regular) |
| .notification--success | class | — | verde |
| .notification--error | class | — | vermelho |
| .notification--warning | class | — | amarelo |
| .notification--info | class | — | neutro |
| .notification-close | class | — | botão dispensar (opcional) |
quando usar
use
não use
acessibilidade
- role="status" pra info/success
- role="alert" pra erro crítico
- Botão close com aria-label
- Não auto-dismiss (diferente do toast)
- aria-live="polite" se aparecer dinamicamente
código
<div class="notification notification--inline notification--info" role="status">
<div class="notification-icon">i</div>
<div class="notification-body">
<strong>título</strong>
<p>mensagem.</p>
</div>
<button class="notification-close">×</button>
</div>