Section message
A message about one part of a page, placed at the top of that part. Middle of three levels: a banner speaks for the whole app, an inline message for one control.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { SectionMessage } from '@/ui/section-message';<SectionMessage title=""> Look at the last runs below, then turn it back on.</SectionMessage>Information
A decision or fact the section needs before you go on. Here a Rule has just turned on, and the message sits at the top of its page with two actions.
import { Button } from '@/ui/button';
import { SectionMessage } from '@/ui/section-message';
export default function SectionMessageInformation() {
return (
<SectionMessage
title="12 records match now. Run on them?"
actions={
<>
<Button size="sm" variant="primary">Run on 12</Button>
<Button size="sm">Not now</Button>
</>
}
className="max-w-160"
>
The Rule runs on new matches from now on. It can also run once on what already matches.
</SectionMessage>
);
}Warning
Something stopped, or will go wrong unless you act. Say what happened, then what to do.
import { SectionMessage } from '@/ui/section-message';
export default function SectionMessageWarning() {
return (
<SectionMessage appearance="warning" title="Paused after 3 runs in a row failed" className="max-w-160">
Look at the last runs below, then turn it back on.
</SectionMessage>
);
}Error
Something the section tried failed, with one way to retry. It passes role="alert" because it appears as the result of an action.
import { Button } from '@/ui/button';
import { SectionMessage } from '@/ui/section-message';
export default function SectionMessageError() {
return (
<SectionMessage
appearance="error"
role="alert"
title="Gmail didn't connect"
actions={<Button size="sm">Try again</Button>}
className="max-w-160"
>
Google sent you back before access was granted. Nothing was changed.
</SectionMessage>
);
}Success
A result worth keeping on screen until the section changes. If a toast would do, use a toast.
import { SectionMessage } from '@/ui/section-message';
export default function SectionMessageSuccess() {
return (
<SectionMessage appearance="success" role="status" title="Import finished" className="max-w-160">
214 people added to Northbridge Talent. 3 rows were skipped as duplicates.
</SectionMessage>
);
}