You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<strong>Chimamanda Ngozi Adichie:</strong> Racism should never have happened and so you don't get a cookie for reducing it.
49
+
<strong>Some information on this page may be out-of-date.</strong> This page was last updated at 9:00 a.m. PST. We're currently looking into this issue.
50
50
</Alert>`}
51
51
</LivePreview>
52
52
@@ -73,9 +73,9 @@ Use an Alert for one of these types of information:
73
73
74
74
### Accessibility
75
75
76
-
- Pass in `role="alert"` or `role="status"` through [props](#props). Otherwise, the default role is `status` for neutral alerts and `alert` for warning and error alerts.
77
-
- Screen readers announce error and warning alert text immediately. Alerts that persist across multiple pages announce themselves repeatedly which may become annoying. Consider making alerts in these cases dismissible.
78
-
- Show an alert only when it's needed. Assistive technologies will be able to read a visually hidden element. Don't visually hide an alert and then make it visible through client-side code.
76
+
- Pass in `role="alert"` or `role="status"` through [props](#props). Otherwise, the default role is `status` for neutral Alerts and `alert` for warning and error Alerts.
77
+
- Screen readers announce error and warning Alert text immediately. Alerts that persist across multiple pages announce themselves repeatedly which may become annoying. Consider making Alerts in these cases dismissible.
78
+
- Show an Alert only when it's needed. Assistive technologies will be able to read a visually hidden element. Don't visually hide an Alert and then make it visible through client-side code.
<strong>Martin Luther King, Jr.:</strong> We may have all come on different ships, but we’re in the same boat now.
89
+
<strong>Set up your contact preferences.</strong> You can now set up your contact preferences on your dashboard. <Anchorhref="#">Go to contact preferences</Anchor>
90
90
</Alert>
91
91
</Box>
92
92
<BoxmarginBottom="space30">
93
93
<Alertvariant="warning">
94
-
<strong>James Baldwin:</strong> Love takes off masks that we fear we cannot live without and know we cannot live
95
-
within.
94
+
<strong>Some information on this page may be out-of-date.</strong> This page was last updated at 9:00 a.m. PST. We're currently looking into this issue.
96
95
</Alert>
97
96
</Box>
98
97
<BoxmarginBottom="space30">
99
98
<Alertvariant="error">
100
-
<strong>Audre Lorde:</strong> It is not our differences that divide us. It is our inability to recognize, accept,
101
-
and celebrate those differences.
99
+
<strong>Please update your billing information or we'll suspend your account on March 2.</strong> We couldn't renew your subscription with the information we currently have. <Anchorhref="#">Update billing information</Anchor>
<strong>Set up your contact preferences.</strong> You can now set up your contact preferences on your dashboard. <Anchorhref="#">Go to contact preferences</Anchor>
107
105
</Alert>
108
106
</Box>
109
107
@@ -113,7 +111,7 @@ Use a neutral Alert to notify a user of a change that's relevant for them to ach
113
111
114
112
In most cases, a neutral Alert should be dismissible (_i.e._, have a close button) and should be assigned `role="status"`.
115
113
116
-
You may use [the Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for neutral alerts.
114
+
You may use the [Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for neutral Alerts.
@@ -129,23 +127,23 @@ A warning Alert should provide explain the possible issue, what to do, and what
129
127
130
128
Be cautious about using a warning Alert because they can be stressful for a user to see. In most cases, a warning Alert should be assigned `role="alert"`.
131
129
132
-
You may use [the Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for warning alerts.
130
+
You may use the [Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for warning Alerts.
133
131
134
132
<LivePreviewscope={{Alert, Text}}language="jsx">
135
133
{`<Alert variant="warning">
136
-
<strong>Some information on this page may be out-of-date.</strong> This page was last updated at 9:00 AM PST. We're currently looking into this issue.
134
+
<strong>Some information on this page may be out-of-date.</strong> This page was last updated at 9:00 a.m. PST. We're currently looking into this issue.
137
135
</Alert>`}
138
136
</LivePreview>
139
137
140
138
### Error
141
139
142
-
Use an error Alert to help a user understand a critical issue at the system level, like site-wide service disruptions, active incidents, or expired billing information. When possible, provide a way to resolve the issue in the alert.
140
+
Use an error Alert to help a user understand a critical issue at the system level, like site-wide service disruptions, active incidents, or expired billing information. When possible, provide a way to resolve the issue in the Alert.
143
141
144
142
In most cases, error Alerts should be assigned `role="alert"`.
145
143
146
144
For additional guidance on what kind of component to use, use the [Alert vs. Callout vs. Toast vs. Help Text guide](#alert-vs-callout-vs-toast-vs-help-text). For additional guidance on how to compose error messages, refer to the [error state pattern](/patterns/error-state).
147
145
148
-
You may use [the Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for error alerts.
146
+
You may use the [Text primitive](/primitives/text) as a child of Alert, but if you do, be sure to pass `color="inherit"` for error Alerts.
@@ -155,15 +153,15 @@ You may use [the Text primitive](/primitives/text) as a child of Alert, but if y
155
153
156
154
### Dismissible
157
155
158
-
Add a close button to the alert if it doesn't communicate a persistent status of the system or the account. If you make an alert dismissible, provide another way for the user to retrieve the alert information.
156
+
Make the Alert dismissible if it doesn't communicate a persistent status of the system or the account. If you make an Alert dismissible, provide another way for the user to retrieve the alert information.
159
157
160
-
Don't add a close button to the alert if all these conditions are true:
158
+
Don't make it dismissible if all these conditions are true:
161
159
162
-
- The alert communicates a persistent status of the system or the account.
163
-
- The information is relevant to the user's goals on the page(s) the alert is on.
164
-
- The user wouldn't be able to access the information in the alert if it were closed.
160
+
- The Alert communicates a persistent status of the system or the account.
161
+
- The information is relevant to the user's goals on the page(s) the Alert is on.
162
+
- The user wouldn't be able to access the information in the Alert if it were closed.
165
163
166
-
Keep in mind that the longer an alert is present, the more it starts looking like part of the page and loses its interruptive intent. This might make users start to ignore important alert information.
164
+
Keep in mind that the longer an Alert is present, the more it starts looking like part of the page and loses its interruptive intent. This might make users start to ignore important Alert information.
@@ -187,7 +185,7 @@ For an `error` variant, for example, set the `i18nErrorLabel` prop.
187
185
188
186
## Composition notes
189
187
190
-
Keep content brief by placing only the highest priority information in an Alert. A good rule of thumb is to keep text to a single line in a desktop-sized container, or [limit it to 90 characters](https://practicaltypography.com/responsive-web-design.html).
188
+
Keep content brief by placing only the highest priority information in an Alert. Generally try to [limit content to 90 characters](https://practicaltypography.com/responsive-web-design.html).
- If the message is contextual or specific to a particular part of a page, consider Help Text or a Callout.
218
216
- Do not use a Toast if the message is longer than two sentences (~140 characters). Use a Callout instead.
219
217
- Do not use a Toast if there is more than one anchor or button. Use a Callout instead.
@@ -234,13 +232,13 @@ In general, the persistence and behavior on scroll of an Alert should match the
234
232
<DoDont>
235
233
<Do
236
234
title="Do"
237
-
body="Use only one Alert per page. Use two Alerts only if absolutely necessary and if the Alerts are placed in different containers. Be sure to add 0.5rem spacing if using two Alerts."
235
+
body="Use only 1 Alert per page. Use 2 Alerts only if absolutely necessary and if the Alerts are placed in different containers. Add space30 spacing if using 2 Alerts."
238
236
>
239
237
<Alertvariant="error">
240
-
Your account balance is low and your credit card has expired. As a result we have suspended your account
238
+
Your account balance is low and your credit card has expired. As a result, we have suspended your account.
241
239
</Alert>
242
240
</Do>
243
-
<Donttitle="Don't"body="Don't use more than two Alerts per page.">
241
+
<Donttitle="Don't"body="Don't use more than 2 Alerts per page.">
244
242
<Alertvariant="error">Your credit card has expired</Alert>
245
243
<Alertvariant="warning">Your account balance is low</Alert>
246
244
<Alertvariant="error">Your account is suspended</Alert>
@@ -250,16 +248,16 @@ In general, the persistence and behavior on scroll of an Alert should match the
250
248
<DoDont>
251
249
<Do
252
250
title="Do"
253
-
body="Place global Alerts at the top of the page. Place all other Alerts at the top of the container it relates to beneath the heading."
251
+
body="Place global or page-level Alerts at the top of the page. Place all other Alerts at the top of the container it relates to."
254
252
>
255
253
<Boxpadding="space40">
256
254
<Card>
257
-
<Headingas="h2"variant="heading20">
258
-
Section Heading
259
-
</Heading>
260
255
<BoxmarginBottom="space70">
261
256
<Alertvariant="error">There was a problem below</Alert>
262
257
</Box>
258
+
<Headingas="h2"variant="heading20">
259
+
Section Heading
260
+
</Heading>
263
261
<Paragraph>Please fill in the details below...</Paragraph>
264
262
</Card>
265
263
</Box>
@@ -279,13 +277,13 @@ In general, the persistence and behavior on scroll of an Alert should match the
279
277
<DoDont>
280
278
<Do
281
279
title="Do"
282
-
body="Use anchors to link to more information that may be helpful for users to resolve or clarify an Alert message."
280
+
body="Use Anchors to link to more information that may be helpful for users to resolve or clarify an Alert message."
283
281
>
284
282
<Alertvariant="neutral">
285
283
A call to action <Anchorhref="#">Learn more</Anchor>
286
284
</Alert>
287
285
</Do>
288
-
<Donttitle="Don't"body="Avoid using buttons in Alerts unless it triggers an action.">
286
+
<Donttitle="Don't"body="Avoid using Buttons in Alerts unless it triggers an action.">
Use a Callout to highlight important information on a page or in a page section. Callouts can result from user action, but don’t have to. Do not use a Callouts to tell users about a system-level issue; use an [Alert](/components/alert) instead. Do not use a Callout to convey brief, low-complexity information; use a [Toast](/components/toast) instead. For additional guidance on what kind of component to use, use the [Alert vs. Callout vs. Toast vs. Help Text guide](#alert-vs-callout-vs-toast-vs-help-text).
50
+
Use a Callout to highlight important information on a page. Callouts are less restrictive than Alerts or Toasts—they can result from user action, but don’t have to.
51
+
52
+
Do not use a Callout to tell users about a system-level issue; use an [Alert](/components/alert) instead. For additional guidance on what kind of component to use, reference the [Alert vs. Callout vs. Toast vs. Help Text guide](#alert-vs-callout-vs-toast-vs-help-text).
51
53
52
54
### Accessibility
53
55
54
-
We recommend Callouts 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.
56
+
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.
55
57
56
58
## Examples
57
59
58
60
There are five variants of Callouts: `neutral`, `success`, `warning`, `error`, and `new`. Each variant includes an icon.
59
61
60
-
Each variant includes an icon. To internationalize the icon label for a variant, simply pass the `i18nLabel` prop.
62
+
To internationalize the icon label for a variant, pass the `i18nLabel` prop.
61
63
62
64
### Neutral Callout
63
65
64
-
Use a neutral Callout to communicate relevant information to the page or flow. The information is often static.
66
+
Use a neutral Callout to communicate relevant information to the page or flow. This information is often static.
<CalloutText>This is some information you need to know.</CalloutText>
71
+
<CalloutHeading as="h2">Finding your category ID</CalloutHeading>
72
+
<CalloutText>On your dashboard, look for the relevant "Category ID". It will contain up to five alphanumeric characters.</CalloutText>
71
73
</Callout>`}
72
74
</LivePreview>
73
75
74
76
### Success Callout
75
77
76
-
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 particular part of the page, or when additional information or context needs to be provided.
78
+
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.
77
79
78
-
When composing a success Callout, avoid using the word "successfully"—it's redundant.
80
+
When composing a success Callout, avoid using the word "successfully" since it's redundant.
<CalloutText>Make sure you have permission first. Only send messages to mobile users who have provided consent (opted-in) to receive messages from you.</CalloutText>
85
87
</Callout>`}
86
88
</LivePreview>
87
89
@@ -94,8 +96,8 @@ A warning Callout should should explain the possible issue, what to do, and what
<CalloutText>This is some information you need to know.</CalloutText>
123
+
<CalloutHeading as="h2">Early access to AI features</CalloutHeading>
124
+
<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.</CalloutText>
123
125
</Callout>`}
124
126
</LivePreview>
125
127
126
128
### Dismissible Callout
127
129
130
+
Make a Callout dismissible with the `onDismiss` prop if it doesn't communicate a persistent status of the system or the account, or you provide another way for the user to access the information.
<CalloutText>This callout can be provided an onDismiss prop to allow for dismissible functionality.</CalloutText>
135
+
<CalloutText>Changes to conference insights settings apply only to conferences created in the past 30 days.</CalloutText>
133
136
</Callout>`}
134
137
</LivePreview>
135
138
@@ -175,9 +178,9 @@ Callouts can be inline with text, so use the `marginY` prop to add a vertical ma
175
178
176
179
Compose a Callout with:
177
180
178
-
-**Title (optional).** The title should be concise and convey the essense of the issue.
179
-
-**Body text.** Use the default text style. Do not repeat information contained in a title. If the user needs to take action on another page, or more information would be helpful, include an [Anchor](/components/anchor).
180
-
-**Full punctuation.** Use periods after full sentences. Avoid using exclamation points.
181
+
-**Heading (optional).** The heading should be concise and convey the essence of the issue.
182
+
-**Body text.** Use the default text style. Do not repeat information contained in the heading. If the user needs to take action on another page, or more information would be helpful, include an [Anchor](/components/anchor).
183
+
-**Full punctuation.** Use periods after full sentences.
![kodiakhq[bot]](https://avatars.githubusercontent.com/in/29196?v=4&size=40){kind=avatar}
0 commit comments