Badge

Documentation is WIP, check open issues and start improving!

Badge component in Trafi UI is mostly used to represent tracks, destinations or departures.

It has three different sizes — small (16px), medium (24px) or large (32px) and these sizes define the smallest width badge could be (even if single digit is used displayed in it).

R1SB
1773-10
8

This component also has margin_left and margin_right properties, which specifies the distance between the surrounding components. These margins are always pre-defined based on badge size.

R1SB
1773-10
8

There are some rules how we display Badge and Icon inside of it:


  • We show transport type Icon left to the Badge when the route transport type is not clear.
  • When transport type Icon is next to a Badge the text of the badge is never truncated to an Icon.
  • In case, where placement of Badge interacts with width of other types components (i.e. Track Header or Stop Departures list), if Badge is wider than 7 symbols, we use Icon instead of Text.
  • If Badge doesn’t fit into single line, we truncate it with ellipsis until it does.

Inverse

Inverse badge can be used in screens such as bikes to display the count of available bikes or free spaces.

R1SB
1773-10
8

Rounded

Rounded badge is used as notification bubble in places such as Home screen.

R1SB
1773-10
8

Documentation

Specifications

// Base

$badge-border-radius            : unit(0.75);                      // 3px
$badge-border-radius-small      : unit(0.75);                      // 3px
$badge-border-radius-large      : unit(1);                         // 4px
$badge-border-radius-round      : unit(999);                       // 3996px

$badge-minimum-width            : unit(6);                         // 24px
$badge-minimum-width-small      : unit(4);                         // 16px
$badge-minimum-width-large      : unit(8);                         // 32px

$badge-padding                  : unit(1);                         // 4px, 4px, 4px, 4px
$badge-padding-small            : unit(0.5) unit(1);               // 2px, 4px, 2px, 4px
$badge-padding-large            : unit(1.75) unit(2) unit(1.25);   // 7px, 8px, 5px, 8px

$badge-padding-icon             : unit(1);                         // 4px
$badge-padding-icon-small       : unit(0.5);                       // 2px
$badge-padding-icon-large       : unit(1);                         // 4px

$badge-margins: (
  small                         : unit(1),                         // 4px
  default                       : unit(2),                         // 8px
  large                         : unit(3),                         // 12px
);

$badge-margin-directions        : 'left', 'right';

// Text

$badge-text-type                : 'label';
$badge-text-type-small          : 'caption';
$badge-text-type-large          : 'title';

$badge-text-color               : palette(cl1);

// Inverse

$badge-background-color-inverse : palette(cb1);

API

Name Values Default
body string ’’
color string CP2
inverse true / false false
rounded true / false false
size small / medium / large medium
margin_left true / false false
margin_right true / false false