Chip

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.

Sizes

Active State

IsStroke

Icons

Icons with isStroke

Props

NameTypeRequiredDefaultDescription
sizesmall | mediumNomediumSize of Chip
iconLeftReact.ReactElementNo-Left icon element
iconRightReact.ReactElementNo-Right icon element
iconOnlyReact.ReactElementNo-Icon only element
isActivebooleanNofalseActive state
isStrokebooleanNofalseShow stroke on hover/active