Variants
Example of Page Alerts - default
React documentation
Last modified:
To use BcPageAlert in a view, import it as usual:
import { BcPageAlert } from '@bugcrowd/bc-elements'
Page alert props
| Prop | Type | Required? | Default | Purpose |
|---|---|---|---|---|
children | JSX | required | JSX components to show content. | |
variant | string | optional | Switches between available BEM modifier/variant. | |
size | string | optional | Switches between different sizes like small or large. |
Possible values for variant prop
variant values | Purpose |
|---|---|
success | Use to inform the user about successful or completed actions. |
warning | Use to warn the user about important system information that deserves caution. |
error | Use when you need to alert the user about an error in the system that needs immediate attention. |
Possible values for size prop
size values | Description |
|---|---|
sm | Small-sized variant. |
Any extended types: React.HTMLAttributes<HTMLDivElement>
HTML
Last modified:
Use HTML headings to give context to Page alerts that span longer than 1 line.
Use an ordered List to group errors in the order in which they occur on the page, eg. within a form.
When alerts appear dynamically use ARIA markup to accessibly communicate important messages. See the Accessibility section for more details.
Design
Last modified:
Page alerts are informational (blue) by default.
There are 3 functional variants and 1 size variant:
| Variant | Purpose |
|---|---|
.bc-page-alert--small | Small-sized Page alert variant. |
.bc-page-alert--success | Used to inform the user about successful or completed. |
.bc-page-alert--warning | Used to warn the user about important system information that deserves. |
.bc-page-alert--error | Used to alert the user about an error in the system that needs immediate attention. |
Accessibility
Last modified:
Because Page alerts can communicate alerts or error messages it is important they’re accessible.
Avoid showing multiple Page alerts to users simultaneously, even if they are of different variants. Use a single alert to group important concurrent messages.
Where possible, programmatically associate the DOM element that caused the event or message with its Page alert.
Use ARIA Live regions to communicate dynamic messages.
For more information see:
- Error Messages under Forms
- MDN: ARIA Live region regions
- MDN: ARIA Live region
alertrole — use with care as it’sassertive
Rationale
Last modified:
Page alerts notify users about key information or state changes, eg. form submission errors.
In addition to descriptive alert headings, icons and color are used to help signify and differentiate the types of alerts from each other.
See also
Last modified: