Design System

Notice

ErrorExample critical notice message.
WarningExample caution notice message.
SuccessExample positive notice message.
InfoExample info notice message.
TipExample promote notice message.
<Stack space="small">
    <Notice tone="critical">Example critical notice message.</Notice>
    <Notice tone="caution">Example caution notice message.</Notice>
    <Notice tone="positive">Example positive notice message.</Notice>
    <Notice tone="info">Example info notice message.</Notice>
    <Notice tone="promote">Example promote notice message.</Notice>
</Stack>

Small

Inline variant for tight spaces like form hints.

ErrorExample critical notice message.
WarningExample caution notice message.
SuccessExample positive notice message.
InfoExample info notice message.
TipExample promote notice message.
<Stack space="x-small">
    <Notice
        tone="critical"
        size="small">
        Example critical notice message.
    </Notice>
    <Notice
        tone="caution"
        size="small">
        Example caution notice message.
    </Notice>
    <Notice
        tone="positive"
        size="small">
        Example positive notice message.
    </Notice>
    <Notice
        tone="info"
        size="small">
        Example info notice message.
    </Notice>
    <Notice
        tone="promote"
        size="small">
        Example promote notice message.
    </Notice>
</Stack>