Tag

A tag is used to organize content such as labels, and categories. The label normally represents the keyword to describe the item.

Basic

Label

Source Code

import { AnchorPortOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Basic() {
  return (
    <Tag>
      <AnchorPortOutline />
      <TagContent>Label</TagContent>
    </Tag>
  );
}

Sizes

Tag supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
Default size is lg.

Large

Medium

Small

Source Code

import { LeavesOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Sizes() {
  return (
    <div className="flex gap-x-24 items-center">
      <Tag size="lg" deletable interactive variant="bold">
        <LeavesOutline />
        <TagContent>Large</TagContent>
      </Tag>
      <Tag size="md" deletable interactive variant="bold">

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Responsive

Source Code

import { LeavesOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function ResponsiveSize() {
  return (
    <div className="flex gap-x-24 items-center">
      <Tag size="responsive" deletable interactive variant="bold">
        <LeavesOutline />
        <TagContent>Responsive</TagContent>
      </Tag>
    </div>

Styles

Variants

Tag supports 2 variants light and bold and can be changed by passing the variant prop.
Default variant is light.

Text only

Text with icon

Text only

Text with icon

Source Code

import { ContainerReeferOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Variants() {
  return (
    <div className="flex flex-wrap justify-around">
      <Tag>
        <TagContent>Text only</TagContent>
      </Tag>
      <Tag>
        <ContainerReeferOutline />

Color

Tag supports 9 colors neutral, primary, secondary, blue, green, orange, red, purple and royal and can be changed by passing the color prop.
Default color is neutral.

Light

Neutral

Primary

Secondary

Blue

Green

Orange

Red

Purple

Royal

Bold

Neutral

Primary

Secondary

Blue

Green

Orange

Red

Purple

Royal

Source Code

import { Tag, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { listColorTags } from '../../utils/Tag/helpers';

export function Colors() {
  return (
    <div className="grid grid-cols-2 gap-6 items-end">
      <div className="flex gap-x-8">
        <Text>Light</Text>
        <div className="flex px-8 max-w-364 gap-4 flex-wrap">
          {listColorTags.map(({ color, children }) => (

Interactive

Interactive Tag can be enabled by setting interactive prop to true.

Source Code

import { AnchorPortOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { listColorLabels } from '../../utils/Tag/helpers';

export function Interactive() {
  return (
    <div className="flex gap-4 flex-wrap">
      {listColorLabels.map((color) => (
        <Tag key={'tag-' + color} interactive variant="bold" color={color}>
          <AnchorPortOutline />

Deletable

The close icon will be shown in the tag’s right side by setting deletable prop to true.

Deletable

Source Code

import { AnchorPortOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Deletable() {
  return (
    <Tag deletable variant="bold">
      <AnchorPortOutline />
      <TagContent>Deletable</TagContent>
    </Tag>
  );
}

Selected

Selected state can be enabled by setting selected prop to true.

Selected

Source Code

import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { listColorLabels } from '../../utils/Tag/helpers';

export function Selected() {
  return (
    <div className="flex gap-4 flex-wrap">
      {listColorLabels.map((color) => (
        <Tag key={'tag-selected-' + color} selected variant="bold" color={color}>
          <TagContent>Selected</TagContent>
        </Tag>

Disabled

Disabled State can be enabled by setting disabled prop to true.

Disabled

Source Code

import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Disabled() {
  return (
    <Tag disabled>
      <TagContent>Disabled</TagContent>
    </Tag>
  );
}

Multiline

When a tag’s label is too long, the tag will truncate the text and show ellipsis.
By setting multiline prop to true, the tag will show the full text in multiple lines.

Status badge's label is too long

Source Code

import { LeavesOutline } from '@ocean-network-express/magenta-ui/icons';
import { Tag, TagContent } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Multiline() {
  return (
    <div className="flex gap-4 flex-col items-center w-[150px]">
      <Tag deletable interactive variant="bold">
        <LeavesOutline />
        <TagContent>Status badge's label is too long</TagContent>
      </Tag>
      <Tag multiline deletable interactive variant="bold">

Was this page helpful?