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

  <Chip size="small">Small</Chip>
  <Chip>Medium (default)</Chip>

Active State

  <Chip size="small" active>Small</Chip>
  <Chip active is_stroke>Medium (default)</Chip>

IsStroke

  <Chip size="small" is_stroke>Stroke on Hover</Chip>
  <Chip is_stroke>Stroke on Hover</Chip>

Icons

  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Chip size="small" left_icon="arrows_left">Left Icon</Chip>
    <Chip size="small" right_icon="arrows_right">Right Icon</Chip>
    <Chip size="small" left_icon="arrows_left" right_icon="arrows_right">Both Icons</Chip>
    <Chip size="small" icon_only="generic_settings" />
  </div>
  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Chip left_icon="arrows_left">Left Icon</Chip>
    <Chip right_icon="arrows_right">Right Icon</Chip>
    <Chip left_icon="arrows_left" right_icon="arrows_right">Both Icons</Chip>
    <Chip icon_only="generic_settings" />
  </div>

Icons with isStroke

  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Chip size="small" left_icon="arrows_left" is_stroke>Left Icon</Chip>
    <Chip size="small" right_icon="arrows_right" is_stroke>Right Icon</Chip>
    <Chip size="small" left_icon="arrows_left" right_icon="arrows_right" is_stroke>Both Icons</Chip>
    <Chip size="small" icon_only="generic_settings" is_stroke />
  </div>
  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Chip left_icon="arrows_left" is_stroke>Left Icon</Chip>
    <Chip right_icon="arrows_right" is_stroke>Right Icon</Chip>
    <Chip left_icon="arrows_left" right_icon="arrows_right" is_stroke>Both Icons</Chip>
    <Chip icon_only="generic_settings" is_stroke />
  </div>

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

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select