Notice

The Notice component provides a reusable pattern for notice in the interface.

Type

The type parameter is meant to be seen as sort of severity indicator. It's value either success, info, warning or danger.

Tellus Sem Lorem Malesuada Ipsum
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. A link to something.
Sed posuere consectetur est at lobortis.
Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

Icon

The icon parameter is an array that can configured just as the icon component. It could also be left out completely.

Icon color red.
Icon size small
Without an icon.

Title

The title to show above the message

Lorem ipsum

Tellus Sem Lorem Malesuada Ipsum

Actions & dismiss

These can have an action, and be dismissable.

This message has an action button and may be dismissed (Type: info, Timeout: immediate, Iteration: 1).
This message may be dismissed (Type: info, Timeout: immediate, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: immediate, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: immediate, Iteration: 2).
This message may be dismissed (Type: success, Timeout: immediate, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: immediate, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: immediate, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: immediate, Iteration: 4).
This message has an action button and may be dismissed (Type: info, Timeout: session, Iteration: 1).
This message may be dismissed (Type: info, Timeout: session, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: session, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: session, Iteration: 2).
This message may be dismissed (Type: success, Timeout: session, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: session, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: session, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: session, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: session, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: session, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: session, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: session, Iteration: 4).
This message has an action button and may be dismissed (Type: info, Timeout: permanent, Iteration: 1).
This message may be dismissed (Type: info, Timeout: permanent, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: permanent, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: permanent, Iteration: 2).
This message may be dismissed (Type: success, Timeout: permanent, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: permanent, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: permanent, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: permanent, Iteration: 4).

API

Parameter Default Type Description
info string -
[] object|array -
false array|boolean -
false boolean -
false string|boolean -
false array|boolean -

CSS API

Variable Default Type Values Description
var(--border-radius) range - Border Radius
var(--border-width) range - Size
var(--space) range - Base spacing unit. Used for padding and margin inside components.
var(--outer-space) range - Spacing between components. Use --space for spacing inside components.
var(--shadow-color) rgba - Shadow Color
var(--shadow-amount) range - Multiplier for elevation shadows. 0 = none, 1 = default.
var(--corner-shape) select square, round, squircle, circular, bevel, scoop Corner Shape
var(--color--info) color - Selects the token family used for informational notices.
var(--color--info-contrast) color - Info Contrast
var(--color--info-border) color - Auto-generated companion token for info border and emphasis states.
var(--color--danger) color - Selects the token family used for danger notices.
var(--color--danger-contrast) color - Danger Contrast
var(--color--danger-border) color - Manual companion token for danger border and emphasis states.
var(--color--warning) color - Selects the token family used for warning notices.
var(--color--warning-contrast) color - Warning Contrast
var(--color--warning-border) color - Auto-generated companion token for warning border and emphasis states.
var(--color--success) color - Selects the token family used for success notices.
var(--color--success-contrast) color - Success Contrast
var(--color--success-border) color - Auto-generated companion token for success border and emphasis states.
var(--font-size-300) range - Two steps above base in the type scale. Equivalent to h5.

Similar components