Tag

The component is indicated for the cases where it's necessary to categorize, organize or name components using keywords to describe them. Tags provide a fast recognition and navigability.

Best practices

Use truncate when the text size reaches 200px.

Tag default

NormalAlertDangerInfoSuccess

import { HFlow, Tag } from '@lemonade/ui'
import React from 'react'

function TagDefault() {
  return (
    <HFlow>
      <Tag>Normal</Tag>
      <Tag type='alert'>Alert</Tag>
      <Tag type='danger'>Danger</Tag>
      <Tag type='info'>Info</Tag>
      <Tag type='success'>Success</Tag>
    </HFlow>
  )
}

export default TagDefault

Tag with icon

NormalAlertDangerInfoSuccess

import { HFlow, Tag } from '@lemonade/ui'
import React from 'react'

function TagIcon() {
  return (
    <HFlow>
      <Tag icon='userFilled'>Normal</Tag>
      <Tag type='alert' icon='exclamationTriangleFilled'>
        Alert
      </Tag>
      <Tag type='danger' icon='banFilled'>
        Danger
      </Tag>
      <Tag type='info' icon='infoCircleFilled'>
        Info
      </Tag>
      <Tag type='success' icon='checkCircleFilled'>
        Success
      </Tag>
    </HFlow>
  )
}

export default TagIcon

Removable tag

NormalAlertDangerInfoSuccess

import { HFlow, Tag } from '@lemonade/ui'
import React from 'react'

function TagRemovable() {
  return (
    <HFlow>
      <Tag removable onRemove={console.log}>
        Normal
      </Tag>
      <Tag type='alert' removable onRemove={console.log}>
        Alert
      </Tag>
      <Tag type='danger' removable onRemove={console.log}>
        Danger
      </Tag>
      <Tag type='info' removable onRemove={console.log}>
        Info
      </Tag>
      <Tag type='success' removable onRemove={console.log}>
        Success
      </Tag>
    </HFlow>
  )
}

export default TagRemovable