BumblebeeBumblebee

Tag

Contents

Live demoDesignCode

Live demo

Small tags

Default tag
Icon
uk Flag
Barclays Bank
Primary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Medium tags (default size)

Default tag
Icon
uk Flag
Barclays Bank
Primary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Large tags

Default tag
Icon
uk Flag
Barclays Bank
Primary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Design

Usage

Tags help label and organise items using keywords that describe them. Use short labels for easy scanning. Tags can also be used as a method of filtering data. Top level label cannot be removed and remains at the top of the page to display key information. Removable tags are used when searching in the search bar or selecting an option in the dropdown. Users can remove tags by clicking the “X” icon.

Placement

Top level labels are placed on the top half of the page, under the title of page and display key information. Removable tags are at the bottom of the search bar, inside a table to display active filters. Please refer to Placement in page designs for examples.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable. Keyboard support The control to remove a tag is implemented as a button with standard keyboard support.

Tag content

Searching

The text of the tag will reflect the text used in the search input.

Selecting a filter

The text of the tag will reflect the option or options selected. For example, if the user selects the “funded” status, the tag text will be “Funded”

Selecting a date

The text of the tag will reflect one of the default date ranges provided, a specific date with the format “dd/mm/yyy” or a specific date range with the format “dd/mm/yyy to dd/mm/yyy”

Top level labels

The text within the labels will be key information set by the page it sits in.

Adding a tag

Adding a tag using the search input

A tag will appear under the “search input” after the user types something in the search input and presses the enter button.

Adding a tag using the multiselect filter

A tag will appear under the filter after the user selects something one of the options in the dropdown menu.

Adding a tag using the date filter

A tag will appear under the filter after the user selects one of options or enters a date, or range of dates manually.

Removing

Removing a single tagUsers can remove individual tags by clicking the “x” icon inside the tag or selecting the specific filter and clicking “clear” inside the dropdown menu.Removing all tagsUsers can remove all tags at the same time by clicking the “clear filters” button on the right.

Code

import { Tag } from '@shieldpay/bumblebee/tag';

    <Tag variant="primary">Primary tag</Tag> // default just showing example
    <Tag variant="warning">Warning tag</Tag>
    <Tag variant="alert">Alert tag</Tag>
    <Tag variant="success">Success tag</Tag>

    <Tag size="small">Warning tag</Tag> // default just showing example
    <Tag size="medium">Alert tag</Tag>
    <Tag size="large">Success tag</Tag>