tag

Import

import { Tag } from '@xpanseinc/nebula'

Basic Usage

Basic

<Tag>
  Basic
</Tag>

With Icon

Mail

<Tag icon={<MailIcon />}>
  Mail
</Tag>

Status Tags

import { StatusTag } from '@xpanseinc/nebula'

The default position of the Pip is appended as seen in the first line. Use the prependPip prop to display the Pip on the other side of the child text.

PrimaryNeutralPositiveCautionNegativeWireframePrimaryNeutralPositiveCautionNegativeWireframe

<HStack spacing={8} wrap>
  <StatusTag color="primary">
    Primary
  </StatusTag>

  <StatusTag color="neutral">
    Neutral
  </StatusTag>

  <StatusTag color="positive">
    Positive
  </StatusTag>

  <StatusTag color="caution">
    Caution
  </StatusTag>

  <StatusTag color="negative">
    Negative
  </StatusTag>

  <StatusTag>
    Wireframe
  </StatusTag>

  <StatusTag color="primary" prependPip>
    Primary
  </StatusTag>

  <StatusTag color="neutral" prependPip>
    Neutral
  </StatusTag>

  <StatusTag color="positive" prependPip>
    Positive
  </StatusTag>

  <StatusTag color="caution" prependPip>
    Caution
  </StatusTag>

  <StatusTag color="negative" prependPip>
    Negative
  </StatusTag>

  <StatusTag prependPip>
    Wireframe
  </StatusTag>
</HStack>

Interactive

import { InteractiveTag } from '@xpanseinc/nebula'

InteractiveCustom Icon

<HStack spacing={8} wrap>
  <InteractiveTag onClick={handleClick}>
    Interactive
  </InteractiveTag>

  <InteractiveTag
    color="positive"
    onClick={handleClick}
    buttonIcon={<CheckmarkIcon />}
    buttonLabel="Complete"
  >
    Custom Icon
  </InteractiveTag>
</HStack>