UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Behaviour
  • Best Practices
  • Style

Was this helpful?

  1. Components

Badge

PreviousAvatarNextBreadcrumb

Last updated 4 years ago

Was this helpful?

Usage

Badge notifications appear temporarily and are used to inform users that there is a new activity or action required. They won't interrupt the user experience and disappear once the user has read the alert or message. They appear with a number inside the circle and placement is always at the top right corner.

Behaviour

  • Appears only with a number

  • Disappears when there are no alerts or messages or no action needs to be taken

Best Practices

  • Use the badge to communicate alerts or messages or an action that needs to be taken

  • Always position the badge at the top right to clearly identify the object

  • It can be used in primary navigation but also as a standalone element with a tag

Style

  • Rectangle is 16px height with radius of 10px, and a border of white (0.5px)

    • Default; Blue Base, Copy colour White.

    • Danger; Red Base, Copy colour; White.

    • Warning: Yellow L50, Copy colour; Yellow D50.

    • Success; Green Base, Copy colour; White.

    Font size 10px (Open sans regular), with line height 16px