www/docs/components/alerts.mdx
import AdditionalContent from '!!raw-loader!../examples/Alert/AdditionalContent'; import Basic from '!!raw-loader!../examples/Alert/Basic'; import Dismissible from '!!raw-loader!../examples/Alert/Dismissible'; import DismissibleControlled from '!!raw-loader!../examples/Alert/DismissibleControlled'; import Link from '!!raw-loader!../examples/Alert/Link';
Alerts are available for any length of text, as well as an optional
dismiss button. For proper styling, use one of the eight variants.
:::info Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not
be conveyed to users of assistive technologies – such as screen readers.
Ensure that information denoted by the color is either obvious from the
content itself (e.g. the visible text), or is included through alternative
means, such as additional text hidden with the .visually-hidden
class.
:::
For links, use the <Alert.Link> component to provide matching
colored links within any alert.
Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy.
<CodeBlock language="jsx" live> {AdditionalContent} </CodeBlock>Add the dismissible prop to add a functioning dismiss
button to the Alert.
You can also control the visual state directly which is great if you want to build more complicated alerts.
<CodeBlock language="jsx" live> {DismissibleControlled} </CodeBlock>