Tag

O componente é indicado para casos onde é necessário categorizar, organizar ou nomear componentes utilizando palavras-chave para descrevê-los. Tags proporcionam um rápido reconhecimento e navegação.

Boas práticas

Utilize o método truncate quando o texto atingir o tamanho de 200px.

Tag padrão

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 com ícone

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

Tag removível

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