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.

Default

Sizes

Variants

Active

Icons

Is Stroke

Is Stroke with Icons

Chip props

NameTypeRequiredDefaultDescription
iconLeftJSX.Element | booleanNo-Left icon
iconOnlyJSX.Element | booleanNo-Icon without text
iconRightJSX.Element | booleanNo-Right icon
isActivebooleanNofalseActive state
isStrokebooleanNofalseShows stroke on hover/active
sizesm | mdNomdSize of chip
variantdefault | ghostNodefaultVisual/Logical variant of chip