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.
<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>
}
Here are a bunch in different colors.
redorangeyellowgreentealbluepurplepinkgrey
{colors.map(color => (
<Tag key={color} sx={{ color: color, mr: [2] }}>
{color}
</Tag>
))}