Chips are compact little units that represent actions, filters or choices. When shown, they allow users to prompt actions, filter games/content and choose options. We use three types of chips in the Moon:

Action chip Action chips prompt actions related to the game/content.

Filter chip Filter chips let users sieve through large categories.

Selection chip Selection chips allow users to select options that matter to them.


Active State



Icons with isStroke

Chip props
Name Type Required Default Description
size xs | sm | md | lg | xl No md Size for chip
left_icon string No - Asset name for the left icon
right_icon string No - Asset name for the right icon
icon_only string No - Asset name for the icon. Icon only and no text shown
active boolean No false Active state
is_stroke boolean No false Show stroke on hover/active