Notice

A short message about the result of an action or something the visitor must know: success, warning, error or info.

Success, warning, error and infoDark · Grafite

Enviado

Recebemos seu pedido (MB-7K2Q9D). A equipe vai responder pelo contato informado.

Atenção

Esta conversa chegou ao limite de mensagens. Continue pelo formulário ou WhatsApp.

Erro

Não foi possível enviar agora. Tente de novo ou escreva para contato@monkbusiness.com.br.

Info

Atendimento de segunda a sexta, das 9h às 18h (horário de Brasília).

Success, warning, error and infoLight · Gelo

Enviado

Recebemos seu pedido (MB-7K2Q9D). A equipe vai responder pelo contato informado.

Atenção

Esta conversa chegou ao limite de mensagens. Continue pelo formulário ou WhatsApp.

Erro

Não foi possível enviar agora. Tente de novo ou escreva para contato@monkbusiness.com.br.

Info

Atendimento de segunda a sexta, das 9h às 18h (horário de Brasília).

Usage

Provide a bold status word first (“Enviado”, “Atenção”, “Erro”, “Info”) and one or two sentences that say what happened and what to do next. Color comes from success, warning, danger or info on the outline and the status word; the sentence stays in fg. The word carries the meaning, so color is never the only signal.

Notices that appear after an action are live regions: role="status" for success and role="alert" for errors (the defaults). For a notice that is on the page from the start, pass role="none".

Do

• Start with the status word, then say what happened and what to do next.
• Keep it to one or two sentences.
• Put reference codes in mono: MB-7K2Q9D.

Don't

• Show more than one notice per form.
• Use notices for marketing copy.
• Apologize at length.

Astro

---
import Notice from '@monk-business/astro/Notice.astro';
---

<Notice tone="success">
  Recebemos seu pedido (<span class="mb-text-mono">MB-7K2Q9D</span>). A equipe vai responder pelo contato informado.
</Notice>
<Notice tone="danger" message="Não foi possível enviar agora. Tente de novo em alguns minutos." />

HTML

<div class="mb-notice mb-notice--success" role="status">
  <strong>Enviado</strong>
  <p>Recebemos seu pedido (MB-7K2Q9D). A equipe vai responder pelo contato informado.</p>
</div>
<div class="mb-notice mb-notice--danger" role="alert">
  <strong>Erro</strong>
  <p>Não foi possível enviar agora. Tente de novo em alguns minutos.</p>
</div>

Props

Notice props · also accepts the attributes of <div>

Prop	Type	Default	Description
tone	'success'| 'warning'| 'danger'| 'info'	'info'	Status: success, warning, danger (errors) or info.
title	string	—	The status word. Defaults to "Enviado", "Atenção", "Erro" or "Info" for the tone.
message	string	—	The message. The default slot replaces it when you need markup (links, a reference code).
role	'status'| 'alert'| 'none'	—	Live region role. Defaults to alert for danger, status for success and none for the others; pass none to render without a role (for example, a notice that is present when the page loads).

* required.