Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - callout
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<p>Do not use a Callout to tell users about a system-level issue; use an Alert instead. For additional guidance on what kind of component to use, reference the Alert vs. Callout vs. Toast vs. Help Text guide.</p> <h3>Accessibility</h3> <p>Callouts should have a CalloutHeading so that the information is easier to navigate to for people who use screen readers. The CalloutHeading's level should be set appropriately with the as prop. It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page.</p> <h2>Examples</h2> <p>There are five variants of Callouts: neutral, success, warning, error, and new. Each variant includes an icon.</p> <div class="example-section"> <h3>Neutral Callout</h3> <p>Use a neutral Callout to communicate relevant information to the page or flow. This information is often static.</p> <div class="callout-example" id="neutral-example"></div> </div> <div class="example-section"> <h3>Success Callout</h3> <p>Use a success Callout to communicate that the desired outcome was achieved. A success Callout can be appropriate when the outcome is relevant to a specific part of the page, or when additional information or context needs to be provided.</p> <div class="callout-example" id="success-example"></div> </div> <div class="example-section"> <h3>Warning Callout</h3> <p>Use a warning Callout to help users avoid an undesirable outcome, or inform users of unexpected behaviors or outcomes.</p> <div class="callout-example" id="warning-example"></div> </div> <div class="example-section"> <h3>Error Callout</h3> <p>Use an error Callout to communicate errors for a particular section of a page, or that applies to the whole page.</p> <div class="callout-example" id="error-example"></div> </div> <div class="example-section"> <h3>New Callout</h3> <p>Use a new Callout to spotlight a recent addition or update.</p> <div class="callout-example" id="new-example"></div> </div> <div class="example-section"> <h3>Dismissible Callout</h3> <p>Make a Callout dismissible with the onDismiss prop if it doesn't communicate a persistent status of the system or the account.</p> <div class="callout-example" id="dismissible-example"></div> </div> <div class="example-section"> <h3>Callout with a list</h3> <p>Callouts can have lists of information within them, and are useful for providing error summaries when there are many errors on the page.</p> <div class="callout-example" id="list-example"></div> </div> <div class="example-section"> <h3>Callout with margin</h3> <p>Callouts can be inline with text, so use the marginY prop to add a vertical margin.</p> <div class="callout-example" id="margin-example"></div> </div> <h2>Composition notes</h2> <p>Compose a Callout with:</p> <ul> <li><strong>Heading (optional).</strong> The heading should be concise and convey the essence of the issue.</li> <li><strong>Body text.</strong> Use the default text style. Do not repeat information contained in the heading.</li> <li><strong>Full punctuation.</strong> Use periods after full sentences.</li> </ul> <h3>Alert vs. Callout vs. Toast vs. Help Text</h3> <p><strong>Alert</strong></p> <ul> <li>Alerts communicate information relevant at the system level.</li> <li>Do not use Alerts in response to user action.</li> </ul> <p><strong>Callout</strong></p> <ul> <li>Callouts communicate information particular to a section of a page, or information that applies to a whole page.</li> <li>Use a Callout when there are multiple pieces of information to convey.</li> <li>Callouts can result from a user action, but don't have to.</li> </ul> <p><strong>Toast</strong></p> <ul> <li>Toasts communicate brief, easily comprehended messages.</li> <li>Toasts result from a user action.</li> <li>Do not use a Toast if the message is longer than two sentences.</li> </ul> <p><strong>Help Text</strong></p> <ul> <li>Help Text communicates contextual responses.</li> <li>Help Text can result from a user action, but don't have to.</li> </ul> <script> // Wait for modules to load setTimeout(() => { const { Callout, CalloutHeading, CalloutText, CalloutList, CalloutListItem, Paragraph } = window.TwilioPaste; // Basic example const basicExample = document.getElementById('basic-example'); const basicCallout = Callout({ variant: 'neutral' }, [ CalloutHeading({ as: 'h2' }, 'Heads up!'), CalloutText({}, 'This is some information you need to know.') ]); basicExample.appendChild(basicCallout); // Neutral example const neutralExample = document.getElementById('neutral-example'); const neutralCallout = Callout({ variant: 'neutral' }, [ CalloutHeading({ as: 'h2' }, 'Finding your category ID'), CalloutText({}, 'On your dashboard, look for the relevant "Category ID". It will contain up to five alphanumeric characters.') ]); neutralExample.appendChild(neutralCallout); // Success example const successExample = document.getElementById('success-example'); const successCallout = Callout({ variant: 'success' }, [ CalloutHeading({ as: 'h2' }, 'Recommended action'), CalloutText({}, 'Make sure you have permission first. Only send messages to mobile users who have provided consent (opted-in) to receive messages from you.') ]); successExample.appendChild(successCallout); // Warning example const warningExample = document.getElementById('warning-example'); const warningCallout = Callout({ variant: 'warning' }, [ CalloutHeading({ as: 'h2' }, 'Permission settings will change in 30 days.'), CalloutText({}, 'Update your permission settings now to avoid any delays or issues accessing your accounts.') ]); warningExample.appendChild(warningCallout); // Error example const errorExample = document.getElementById('error-example'); const errorCallout = Callout({ variant: 'error' }, [ CalloutHeading({ as: 'h2' }, 'Missing values'), CalloutText({}, 'Please fill out the "Street address" field.') ]); errorExample.appendChild(errorCallout); // New example const newExample = document.getElementById('new-example'); const newCallout = Callout({ variant: 'new' }, [ CalloutHeading({ as: 'h2' }, 'Early access to AI features'), CalloutText({}, 'You have early access to deliverability scores, Intelligent Discovery Assistant, and intelligent alerts. Try out these new features, and get personalized alerts and recommendations for your account.') ]); newExample.appendChild(newCallout); // Dismissible example const dismissibleExample = document.getElementById('dismissible-example'); const dismissibleCallout = Callout({ variant: 'new', onDismiss: () => alert('dismissed') }, [ CalloutText({}, 'Changes to conference insights settings apply only to conferences created in the past 30 days.') ]); dismissibleExample.appendChild(dismissibleCallout); // List example const listExample = document.getElementById('list-example'); const listCallout = Callout({ variant: 'warning' }, [ CalloutHeading({ as: 'h2' }, 'Make sure to check for personal data, such as:'), CalloutList({ as: 'ul' }, [ CalloutListItem({}, 'Name'), CalloutListItem({}, 'Email'), CalloutListItem({}, 'Phone number') ]) ]); listExample.appendChild(listCallout); // Margin example const marginExample = document.getElementById('margin-example'); const marginContainer = document.createElement('div'); const paragraph1 = Paragraph({}, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'); const marginCallout = Callout({ variant: 'neutral', marginY: 'space70' }, [ CalloutHeading({ as: 'h2' }, 'Accessibility insight'), CalloutText({}, 'Make sure every Input is associated with a Label.') ]); const paragraph2 = Paragraph({}, 'Mi in nulla posuere sollicitudin aliquam ultrices. Consectetur libero id faucibus nisl tincidunt eget nullam non. Imperdiet nulla malesuada pellentesque elit eget.'); marginContainer.appendChild(paragraph1); marginContainer.appendChild(marginCallout); marginContainer.appendChild(paragraph2); marginExample.appendChild(marginContainer); }, 100); </script></body></html>' width="100%" height="2000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">