Tag

Use to indicate a binary option. Useful for filters on lists, map layers, etc.

Here are two, one of which is set to on and the other off.

Always onAlways off

<Tag label={'Always on'} value={true} sx={{ mr: [2] }}>
  Always on
</Tag>
<Tag label={'Always off'} value={false} >
  Always off
</Tag><Tag label={'Always on'} value={true} sx={{ mr: [2] }}>
  Always on
</Tag>
<Tag label={'Always off'} value={false} >
  Always off
</Tag>

They can be made clickable by adding a toggle method. Here's an example where we add state.

() => {
  const [value, setValue] = useState(true)
  return (
    <Tag value={value} onClick={() => setValue((prev) => !prev)}>
      Click me
    </Tag>
  )
}() => {
  const [value, setValue] = useState(true)
  return (
    <Tag value={value} onClick={() => setValue((prev) => !prev)}>
      Click me
    </Tag>
  )
}

Here are a bunch in different colors.

redorangeyellowgreentealbluepurplepinkgrey

{
  colors.map((color) => (
    <Tag key={color} sx={{ color: color, mr: [2] }}>
      {color}
    </Tag>
  ))
}{
  colors.map((color) => (
    <Tag key={color} sx={{ color: color, mr: [2] }}>
      {color}
    </Tag>
  ))
}

X,Y: 0000,0000

4a30554