components

Badges

A badge is a visual indicator for numeric values such as tallies and scores. A dot badge notifies the user that something is new or updated without showing a count.

components

Badges

A badge is a visual indicator for numeric values such as tallies and scores. A dot badge notifies the user that something is new or updated without showing a count.

components

Badges

A badge is a visual indicator for numeric values such as tallies and scores. A dot badge notifies the user that something is new or updated without showing a count.

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

R500

G500

GR100

GG100

N400

none

Predefined by variants & states

Width

hug

none

Height

fixed (18px)

none

Radius

999px

none

Outline

N0

none

Solid color : use 2px outline

Gradient color : no outline color

Animation shimmer

ON/OFF

none

Shimmer animation can be turn on or off by vertical

  1. Badge text

removable

changeable

Typography token

small

none

example title usecase : New, Baru, Hot

Color

text invert

none

Alignment

align-center

none

Overflow handling

truncation : none

none

Max lines

no max line

none

Will be capped to use short text by copywriters, code-wise show all text

Dimension

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

R500

G500

GR100

GG100

N400

none

Predefined by variants & states

Width

hug

none

Height

fixed (18px)

none

Radius

999px

none

Outline

N0

none

Solid color : use 2px outline

Gradient color : no outline color

Animation shimmer

ON/OFF

none

Shimmer animation can be turn on or off by vertical

  1. Badge text

removable

changeable

Typography token

small

none

example title usecase : New, Baru, Hot

Color

text invert

none

Alignment

align-center

none

Overflow handling

truncation : none

none

Max lines

no max line

none

Will be capped to use short text by copywriters, code-wise show all text

Dimension

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

R500

G500

GR100

GG100

N400

none

Predefined by variants & states

Width

hug

none

Height

fixed (18px)

none

Radius

999px

none

Outline

N0

none

Solid color : use 2px outline

Gradient color : no outline color

Animation shimmer

ON/OFF

none

Shimmer animation can be turn on or off by vertical

  1. Badge text

removable

changeable

Typography token

small

none

example title usecase : New, Baru, Hot

Color

text invert

none

Alignment

align-center

none

Overflow handling

truncation : none

none

Max lines

no max line

none

Will be capped to use short text by copywriters, code-wise show all text

Dimension

design@tiket.com

© Passport tiketdesign 2024. All Right Reserved.

design@tiket.com

© Passport tiketdesign 2024.
All Right Reserved.