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 { Spacer, SpacerAxis, Tag, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Tag>Default</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag color="primary">Primary</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag color="lowContrast">Low Contrast</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag color="highContrast">High Contrast</Tag>
    </>
  );
}

Tag With Icon

import React from 'react';


import { Spacer, SpacerAxis, Tag, 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="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,
  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</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="small">
          Deletable Tag 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,
  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
        </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="small">
          Deletable Tag Small
        </Tag>
      ) : (
        <Button
          color={ButtonColor.secondary}
          onClick={showTag2}
          size={ButtonSize.small}
        >
          Show Tag Again
        </Button>
      )}
    </>
  );
}

Sizes

import React from 'react';


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


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

Disabled

import React from 'react';


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


export function Example() {
  return (
    <>
      <Tag disabled>Disabled</Tag>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing03} />
      <Tag disabled color="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,
  Spacer,
  SpacerAxis,
  Tag,
  magma,
} from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Tag isInverse>Inverse Default</Tag>
        <Spacer
          axis={SpacerAxis.horizontal}
          size={magma.spaceScale.spacing03}
        />
        <Tag isInverse color="primary">
          Inverse Primary
        </Tag>
        <Spacer
          axis={SpacerAxis.horizontal}
          size={magma.spaceScale.spacing03}
        />
        <Tag isInverse color="lowContrast">
          Inverse Low Contrast
        </Tag>
        <Spacer
          axis={SpacerAxis.horizontal}
          size={magma.spaceScale.spacing03}
        />
        <Tag isInverse color="highContrast">
          Inverse High Contrast
        </Tag>
      </CardBody>
    </Card>
  );
}

Inverse Disabled

import React from 'react';


import {
  Card,
  CardBody,
  Spacer,
  Tag,
  SpacerAxis,
  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="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.default
TagColor.highContrast
TagColor.lowContrast
TagColor.primary

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.default
TagColor.highContrast
TagColor.lowContrast
TagColor.primary

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