Callout

A callout brings attention to important information that is related to the main content.

Anatomy

1. Container - the container sets the contents of the callout apart from the main content.
2. Icon (optional) - an icon can be used to add character or emphasize the title.
3. Title (recommended) - the title of a callout summarizes its contents.
4. Dismiss Button (optional) - a control that allows the user to dismiss the callout.
5. Body - the contents of the callout.

Usage

Use a callout to bring attention to important information that is related but set apart from the main content. Effective callouts emphasize, summarize, or provide additional information about the main content, but they should also be clear as standalone snippets of information. In other words, callouts should make sense both in context and out of context.

Callouts vs. Alerts

Callouts are meant to be part of the main document and should exist on the page when it first loads. It is not recommended to use a callout to alert the user of something that just happened, as screen reader users will not be alerted to the change.

Presets

Three preset callouts are provided to emphasize "success," "warning," and "error" in a consistent way.

Be careful to always provide a title for these presets, as color and icons alone will never convey meaning to everyone. A clear title will ensure that screen reader users and users with color blindness can still understand the role of the callout.

Success

Use the success preset to call attention to positive things, such as a correct answer or a good practice.

Warning

Use the warning preset to caution or warn the reader.

Error

Use the error preset to call attention to negative things, such as incorrect answers or a bad practice.

React API

Callout

import { Callout } from '@wwnds/react';

Live Editor

<Callout title="Lorem Ipsum" icon="star" border="left" dismissible>
	<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry.
		Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		when an unknown printer took a galley of type.
	</p>
</Callout>

Result

Loading...

Name	Description	Type
title	The title summarizes the callout's contents.	string
icon	An icon can be added for character or to emphasize the callout's title.	IconVariant | SVGIcon
color	The callout's color family.	"base" | "warning" | SystemColors | "primary" | "error" | "success"
border	The position of the border.	"top" | "right" | "bottom" | "left"
dismissible	Indicates whether callout can be dismissed.	boolean
tag	The HTML element used for the callout. This will default to aside when a title is provided, making it a landmark with an accessible name of title. If no title is provided, this will default to div to ensure that it is not a landmark. This behavior can be overridden by providing an explicit tag.	"aside" | "div"
onDismiss	Callback function that is called when the callout is dismissed.	(() => void)
baseName	The base class name according to BEM conventions.	string
iconClass	The className that will be applied to the callout icon.	string
headerClass	The className that will be applied to the callout header element.	string
titleClass	The className that will applied to the callout title.	string
dismissClass	The className that will be applied to the close Button.	string
bodyClass	The className that will be applied to the callout's body container	string

Callout Presets

Each of the three presets use the main Callout's props but sets a default border, color, icon, and title for your convenience.

import { CalloutError, CalloutSuccess, CalloutWarning } from '@wwnds/react';

CalloutSuccess

This preset is equivalent to:

<Callout border="left" color="success" icon="check-circle" title="Success" />

CalloutWarning

This preset is equivalent to:

<Callout border="left" color="warning" icon="warning" title="Warning" />

CalloutError

This preset is equivalent to:

<Callout border="left" color="error" icon="exclamation-circle" title="Error" />