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

Counter

PreviousContainerNextDivider

Last updated 4 years ago

Was this helpful?

Usage

Counter notifications are used to inform users of a numerical value also indication for further action that could be required. They won't interrupt the user experience and should only be used within the primary navigation. They can appear with a number inside the circle or an icon.

Behaviour

  • Appears with a number or an icon the light and default can be used where needed within the application. Default should be used within the navigation.

  • Success (Green) is used to indicate that no action is needed and to inform the user of quantity

  • Warning (Yellow) is used to indicate remedial action is needed, a warning notification will be sent the admin user to inform them

  • Danger (Red) is used to indicate immediate action is needed, a danger notification will be sent the admin user to inform them with a link to action to rectify

Best Practices

  • Use the correct counter to communicate the correct action that needs to be taken

  • Always position the counter in the primary navigation but it can be used as a standalone element

  • Must not exceed 3 digit’s (999) like badge component

Style

  • Circle is 28px height and placement of icon or number must always be central.

  • Padding is 4px. Font size; Caption 4

  • Default styling as follows

    • Danger default; Red Base, Copy / icon colour; White

    • Warning default: Yellow L50, Copy / icon colour; Yellow D50

    • Success default; Green Base, Copy / icon colour; White

  • Light styling as follows

    • Danger light; Red L90, Copy / icon colour; Red Base

    • Warning light: Yellow L90, Copy / icon colour; Yellow D50

    • Success light; Green L90, Copy / icon colour; Green Base