Skip Navigation
React Magma

Tag

Styled displays of a category via search filters, metadata and other results

Basic Usage

import React from 'react';


import { Tag } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Tag>Text Label</Tag>
    </>
  );
}

Colors

import React from 'react';


import {
  Tag,
  TagColor,
  Flex,
  FlexBehavior,
  FlexJustify,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <Flex
      behavior={FlexBehavior.container}
      justify={FlexJustify.spaceBetween}
      style={{ gap: magma.spaceScale.spacing02, maxWidth: '450px' }}
    >
      <Flex behavior={FlexBehavior.item}>
        <Tag> Default</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.primary}>Primary</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.lowContrast}>Low Contrast</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.highContrast}>High Contrast</Tag>
      </Flex>
    </Flex>
  );
}

Data Visualization Colors

The blue, teal, pink and purple options use the data visualization color tokens. They are meant for categorical distinction, such as labeling items that belong to different groups. Because they carry no semantic meaning, they should not be used to communicate states like success, warning or danger, and they should never be the only way information is conveyed.

import React from 'react';


import {
  Tag,
  TagColor,
  Flex,
  FlexBehavior,
  FlexJustify,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <Flex
      behavior={FlexBehavior.container}
      justify={FlexJustify.spaceBetween}
      style={{ gap: magma.spaceScale.spacing02, maxWidth: '450px' }}
    >
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.blue}>Blue</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.teal}>Teal</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.pink}>Pink</Tag>
      </Flex>
      <Flex behavior={FlexBehavior.item}>
        <Tag color={TagColor.purple}>Purple</Tag>
      </Flex>
    </Flex>
  );
}

Tag With Icon

import React from 'react';


import { Spacer, SpacerAxis, Tag, TagSize, magma } from 'react-magma-dom';
import { AccountCircleIcon } from 'react-magma-icons';


export function Example() {
  return (
    <>
      <Tag icon={<AccountCircleIcon />}>Icon Tag</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag icon={<AccountCircleIcon />} size={TagSize.small}>
        Icon Tag Small
      </Tag>
    </>
  );
}

Clickable Tag

import React from 'react';


import { Tag } from 'react-magma-dom';


export function Example() {
  const [counter, setCounter] = React.useState<number>(0);
  function updateCounter() {
    setCounter(count => count + 1);
  }
  return (
    <>
      <p>
        <strong>Counter: </strong> <span>{counter}</span>
      </p>
      <Tag onClick={updateCounter}>Clickable Tag</Tag>
    </>
  );
}

Deletable Tag

import React from 'react';


import {
  Button,
  ButtonColor,
  ButtonSize,
  Spacer,
  SpacerAxis,
  Tag,
  TagSize,
  magma,
} from 'react-magma-dom';


export function Example() {
  const [isTag1Visible, setTag1Visible] = React.useState(true);
  const [isTag2Visible, setTag2Visible] = React.useState(true);


  function deleteTag1() {
    setTag1Visible(false);
  }


  function showTag1() {
    setTag1Visible(true);
  }


  function deleteTag2() {
    setTag2Visible(false);
  }


  function showTag2() {
    setTag2Visible(true);
  }


  return (
    <>
      {isTag1Visible ? (
        <Tag onDelete={deleteTag1}>Deletable</Tag>
      ) : (
        <Button
          color={ButtonColor.secondary}
          onClick={showTag1}
          size={ButtonSize.small}
        >
          Show Tag Again
        </Button>
      )}


      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />


      {isTag2Visible ? (
        <Tag onDelete={deleteTag2} size={TagSize.small}>
          Deletable Small
        </Tag>
      ) : (
        <Button
          color={ButtonColor.secondary}
          onClick={showTag2}
          size={ButtonSize.small}
        >
          Show Tag Again
        </Button>
      )}
    </>
  );
}

Deletable Tag With Icon

import React from 'react';


import {
  Button,
  ButtonColor,
  ButtonSize,
  Spacer,
  SpacerAxis,
  Tag,
  TagSize,
  magma,
} from 'react-magma-dom';
import { AccountCircleIcon } from 'react-magma-icons';


export function Example() {
  const [isTag1Visible, setTag1Visible] = React.useState(true);
  const [isTag2Visible, setTag2Visible] = React.useState(true);


  function deleteTag1() {
    setTag1Visible(false);
  }


  function showTag1() {
    setTag1Visible(true);
  }


  function deleteTag2() {
    setTag2Visible(false);
  }


  function showTag2() {
    setTag2Visible(true);
  }


  return (
    <>
      {isTag1Visible ? (
        <Tag icon={<AccountCircleIcon />} onDelete={deleteTag1}>
          Deletable
        </Tag>
      ) : (
        <Button
          color={ButtonColor.secondary}
          onClick={showTag1}
          size={ButtonSize.small}
        >
          Show Tag Again
        </Button>
      )}


      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />


      {isTag2Visible ? (
        <Tag
          icon={<AccountCircleIcon />}
          onDelete={deleteTag2}
          size={TagSize.small}
        >
          Deletable Small
        </Tag>
      ) : (
        <Button
          color={ButtonColor.secondary}
          onClick={showTag2}
          size={ButtonSize.small}
        >
          Show Tag Again
        </Button>
      )}
    </>
  );
}

Sizes

import React from 'react';


import { Tag, Spacer, SpacerAxis, TagSize, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Tag>Size Default</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag size={TagSize.small}>Size Small</Tag>
    </>
  );
}

Disabled

import React from 'react';


import { Spacer, Tag, SpacerAxis, TagColor, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Tag disabled>Disabled</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag disabled color={TagColor.lowContrast}>
        Disabled Low Contrast
      </Tag>
    </>
  );
}

Inverse

isInverse is an optional boolean prop, that may be passed in when the component is to be displayed on a dark background.

import React from 'react';


import {
  Card,
  CardBody,
  Flex,
  FlexBehavior,
  FlexJustify,
  Tag,
  TagColor,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Flex
          behavior={FlexBehavior.container}
          justify={FlexJustify.spaceBetween}
          style={{ gap: magma.spaceScale.spacing03 }}
        >
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse>Inverse Default</Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.primary}>
              Inverse Primary
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.lowContrast}>
              Inverse Low Contrast
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.highContrast}>
              Inverse High Contrast
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.blue}>
              Inverse Blue
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.teal}>
              Inverse Teal
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.pink}>
              Inverse Pink
            </Tag>
          </Flex>
          <Flex behavior={FlexBehavior.item} sx={3}>
            <Tag isInverse color={TagColor.purple}>
              Inverse Purple
            </Tag>
          </Flex>
        </Flex>
      </CardBody>
    </Card>
  );
}

Inverse Disabled

import React from 'react';


import {
  Card,
  CardBody,
  Spacer,
  Tag,
  TagColor,
  SpacerAxis,
  TagColor,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Tag isInverse disabled>
          Inverse Disabled
        </Tag>
        <Spacer
          axis={SpacerAxis.horizontal}
          size={magma.spaceScale.spacing03}
        />
        <Tag isInverse disabled color={TagColor.lowContrast}>
          Inverse Disabled Low Contrast
        </Tag>
      </CardBody>
    </Card>
  );
}

Tag Props

Any other props supplied will be provided to the wrapping div element.

Deletable Tag Props

color

Description

Color changes between 'primary', 'low contrast', and 'high contrast' style variants between each Tag.

Type

enum, one of:
TagColor.blue
TagColor.default
TagColor.highContrast
TagColor.lowContrast
TagColor.pink
TagColor.primary
TagColor.purple
TagColor.teal

Default

TagColor.default

disabled

Description

Disabled Tag state.

Type

boolean

Default

-

icon

Description

Allows passing a Magma icon to the Tag.

Type

ReactElement

Default

-

isClickable

Description

Passes a clickable state to the Tag.

Type

boolean

Default

-

isInverse

Description

Allows for Inverse styling of each Tag.

Type

boolean

Default

false

labelText

Description

Gets the active Tag label for use with the aria-label attribute inline for accessibility.

Type

React.ReactNode

Default

-

onDelete

Required

Type

function

Default

-

size

Description

Size toggles between a default, and a small size Tag.

Type

enum, one of:
TagSize.medium
TagSize.small

Default

TagSize.medium

testId

Type

string

Default

-

Clickable Tag Props

color

Description

Color changes between 'primary', 'low contrast', and 'high contrast' style variants between each Tag.

Type

enum, one of:
TagColor.blue
TagColor.default
TagColor.highContrast
TagColor.lowContrast
TagColor.pink
TagColor.primary
TagColor.purple
TagColor.teal

Default

TagColor.default

disabled

Description

Disabled Tag state.

Type

boolean

Default

-

icon

Description

Allows passing a Magma icon to the Tag.

Type

ReactElement

Default

-

isClickable

Description

Passes a clickable state to the Tag.

Type

boolean

Default

-

isInverse

Description

Allows for Inverse styling of each Tag.

Type

boolean

Default

false

labelText

Description

Gets the active Tag label for use with the aria-label attribute inline for accessibility.

Type

React.ReactNode

Default

-

onClick

Type

function

Default

-

size

Description

Size toggles between a default, and a small size Tag.

Type

enum, one of:
TagSize.medium
TagSize.small

Default

TagSize.medium

testId

Type

string

Default

-

On this page

Deploys by Netlify