Tag

The <Tag /> component is a basic <Box /> component that can be used to label or categorize content.

import { Tag } from 'minerva-ui'

Preview

#photography

#nature

#travel

Source

<Stack horizontal> <Tag>#photography</Tag> <Tag>#nature</Tag> <Tag>#travel</Tag> </Stack>

<Stack horizontal>
  <Tag>#photography</Tag>
  <Tag>#nature</Tag>
  <Tag>#travel</Tag>
</Stack>

Closeable Tag

Preview

#photography

#nature

#travel

Source

<Stack horizontal> <Tag>#photography</Tag> <Tag> #nature <TagButton /> </Tag> <Tag>#travel</Tag> </Stack>

<Stack horizontal>
  <Tag>#photography</Tag>
  <Tag>
    #nature <TagButton />
  </Tag>
  <Tag>#travel</Tag>
</Stack>

Props

These are props related to the Tag component.

Name	Type	Is Required	Default	Description
showIcon	boolean	optional	false	Sets if close icon should show
icon	string	optional	x	Icon name
onClickedIcon	function	optional	none	Action to take when the icon is clicked