Search/

Page Alerts

Last modified:

Use page alerts to give feedback to the user about an action or state.

Read the Notifications page, which contains a decision flow chart, to help you decide when to use each type of notification.

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

PropTypeRequired?DefaultPurpose
childrenJSXrequiredJSX components to show content.
variantstringoptionalSwitches between available BEM modifier/variant.
sizestringoptionalSwitches between different sizes like small or large.

Possible values for variant prop

variant valuesPurpose
successUse to inform the user about successful or completed actions.
warningUse to warn the user about important system information that deserves caution.
errorUse when you need to alert the user about an error in the system that needs immediate attention.

Possible values for size prop

size valuesDescription
smSmall-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:

VariantPurpose
.bc-page-alert--smallSmall-sized Page alert variant.
.bc-page-alert--successUsed to inform the user about successful or completed.
.bc-page-alert--warningUsed to warn the user about important system information that deserves.
.bc-page-alert--errorUsed 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:

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: