Tag
Live demo
Small tags
Default tag
Icon
Flag
BankPrimary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Medium tags (default size)
Default tag
Icon
Flag BankPrimary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Large tags
Default tag
Icon
Flag BankPrimary tag
Warning tag
Alert tag
Success tag
Super Long text exampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Tag with onClear callback
Informative text here
Tag that expands
Tag this super long message that expands to full width
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> <Tag onDismiss={() => noop} onDismissText="Remove"> Informative text here </Tag> <Tag expand> Tag this super long message that expands to full width </Tag>