BumblebeeBumblebee

Infoblock

Contents

Live demoDesignCode

Live demo

Infoblock Variants

variant examples
DefaultInfoSuccessWarningError
Infoblock
Infoblock
Infoblock
Infoblock
Infoblock

Design

Usage

The error/alert message is presented below a form field when an error is detected to help the user correct the error.

All instances of the error alert is based on the ‘Message-alert-error’ master primitive component. If the master primitive component is changed, all instances will be updated.

It is expected that other message notifications, such as ‘Info’ will be based on this style but with different colours and icons.

Anatomy

Example of the component mentioning the tokens and other components used.

Placement

Short explanation about where the component is going to be used. Example: At the bottom of a card, inside a table. Please refer to Placement in page designs for examples.

Accessibility

To avoid reliance on colour only, the alert error/alert message uses a shaded box and an icon to signify alert, alongside a description of the error.

The error description text colour is within the AA contrast ratio for legibility at 14px size.

The error/alert message does not rely on icons within the field as it may produce unexpected results with browser tools for managing forms.

Use the appropriate ARIA attributes for screen readers where applicable.

Behaviour

If an error/alert message is displayed, it should ‘push down’ all content below with the space it occupies, so that any content below retains the existing spacer between it and the next component.

Responsive

The instances of the component can scale vertically and horizontally, depending on the amount of text or required alignment. The icon and the text retains their alignment and positioning as per the spacing example.

Min + Max Sizing

The width of the error/alert message box should match the width of the form field above across all viewport sizes, unless otherwise specified.

States

Different states of the component. Example: idle, hover, focus, active, disabled.

Code

import { Infoblock } from '@shieldpay/bumblebee/infoblock';

<Infoblock variant="info">
  <FormattedMessage id="hive.components.infoblock.title" />
</Infoblock>

<Infoblock variant="error">
  <FormattedMessage id="hive.components.infoblock.title" />
</Infoblock>