Components

Badge

Badges are used to inform users of the status of an object.

Breakdown

Badges use paragraph regular text paired with an icon to help convey information.

    Usage

    Layout

    Badges should be positioned horizontally within a card if space allows. Responsively badges stack on top of each other as the container reduces in size.

    Anatomy

    Vertical padding

    Vertical padding is the empty space between an elements top or bottom edges. All badges share the same vertical padding of 4.5px.

    Horizontal padding

    Horizontal padding is the empty space between an elements left or right edges. All buttons share the same horizontal padding of 9px.