Skip Navigation
React Magma

Badge

Badges are a small labeling component, used to highlight key pieces of information.

Basic Usage

import React from 'react';


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


export function Example() {
  return <Badge>Badge</Badge>;
}

Variants

Badges have two variants, label and counter. The label is the default variant and is used for general text. The counter is for displaying a numeric count, and can be used inside a button.

import React from 'react';


import {
  Badge,
  BadgeColor,
  BadgeVariant,
  Button,
  ButtonColor,
  ButtonGroup,
} from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Badge variant={BadgeVariant.label}>Label</Badge>
      <Badge variant={BadgeVariant.counter}>99+</Badge>
      <br />
      <br />
      <ButtonGroup>
        <Button>
          Messages
          <Badge
            variant={BadgeVariant.counter}
            color={BadgeColor.secondary}
            isInverse
          >
            99+
          </Badge>
        </Button>
        <Button color={ButtonColor.secondary}>
          Messages
          <Badge variant={BadgeVariant.counter} color={BadgeColor.primary}>
            99+
          </Badge>
        </Button>
      </ButtonGroup>
    </>
  );
}

Colors

Seven colors of badges are available, primary (default), secondary, light, danger, success, info, and warning.

import React from 'react';


import { Badge, BadgeColor } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Badge color={BadgeColor.primary}>Primary</Badge>
      <Badge color={BadgeColor.secondary}>Secondary</Badge>
      <Badge color={BadgeColor.light}>Light</Badge>
      <Badge color={BadgeColor.danger}>Danger</Badge>
      <Badge color={BadgeColor.success}>Success</Badge>
      <Badge color={BadgeColor.info}>Info</Badge>
      <Badge color={BadgeColor.warning}>Warning</Badge>
    </>
  );
}

Weights

Badges have two weights, default and light. The default weight is used when no weight is specified.

import React from 'react';


import { Badge, BadgeColor, BadgeWeight } from 'react-magma-dom';


export function Example() {
  const badgeRowStyles: React.CSSProperties = {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '8px',
  };


  const badgeStyles: React.CSSProperties = {
    margin: 0,
  };


  return (
    <>
      <div style={badgeRowStyles}>
        <Badge color={BadgeColor.primary} style={badgeStyles}>
          Primary
        </Badge>
        <Badge color={BadgeColor.secondary} style={badgeStyles}>
          Secondary
        </Badge>
        <Badge color={BadgeColor.light} style={badgeStyles}>
          Light
        </Badge>
        <Badge color={BadgeColor.danger} style={badgeStyles}>
          Danger
        </Badge>
        <Badge color={BadgeColor.success} style={badgeStyles}>
          Success
        </Badge>
        <Badge color={BadgeColor.info} style={badgeStyles}>
          Info
        </Badge>
        <Badge color={BadgeColor.warning} style={badgeStyles}>
          Warning
        </Badge>
      </div>
      <div style={{ ...badgeRowStyles, marginTop: '8px' }}>
        <Badge
          color={BadgeColor.primary}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Primary
        </Badge>
        <Badge
          color={BadgeColor.secondary}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Secondary
        </Badge>
        <Badge
          color={BadgeColor.light}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light
        </Badge>
        <Badge
          color={BadgeColor.danger}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Danger
        </Badge>
        <Badge
          color={BadgeColor.success}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Success
        </Badge>
        <Badge
          color={BadgeColor.info}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Info
        </Badge>
        <Badge
          color={BadgeColor.warning}
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Warning
        </Badge>
      </div>
    </>
  );
}

Icons

Use the leftIcon and rightIcon props to display Magma icons on either side of a badge.

import React from 'react';


import { Badge, BadgeColor } from 'react-magma-dom';
import { CheckCircleIcon, InfoIcon } from 'react-magma-icons';


export function Example() {
  return (
    <>
      <Badge color={BadgeColor.primary} leftIcon={<CheckCircleIcon />}>
        Left icon
      </Badge>
      <Badge color={BadgeColor.secondary} rightIcon={<InfoIcon />}>
        Right icon
      </Badge>
      <Badge
        color={BadgeColor.success}
        leftIcon={<CheckCircleIcon />}
        rightIcon={<InfoIcon />}
      >
        Both icons
      </Badge>
    </>
  );
}

Event Handling

Badges may also be actionable. To make a badge actionable, use the onClick prop. The onClick event will fire when the badge is clicked, or when the enter or space bar key is pressed.

import React from 'react';


import { Badge, BadgeColor, BadgeVariant } 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>{' '}
        <Badge variant={BadgeVariant.counter}>{counter}</Badge>
      </p>
      <Badge color={BadgeColor.light} onClick={updateCounter}>
        Click me
      </Badge>
      <Badge color={BadgeColor.primary} onClick={updateCounter}>
        Click me too
      </Badge>
    </>
  );
}

Inverse

import React from 'react';


import { Badge, BadgeColor, BadgeWeight, Container } from 'react-magma-dom';


export function Example() {
  const badgeRowStyles: React.CSSProperties = {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '8px',
  };


  const badgeStyles: React.CSSProperties = {
    margin: 0,
  };


  return (
    <Container isInverse style={{ padding: '12px' }}>
      <div style={badgeRowStyles}>
        <Badge color={BadgeColor.primary} isInverse style={badgeStyles}>
          Primary
        </Badge>
        <Badge color={BadgeColor.secondary} isInverse style={badgeStyles}>
          Secondary
        </Badge>
        <Badge color={BadgeColor.light} isInverse style={badgeStyles}>
          Light
        </Badge>
        <Badge color={BadgeColor.danger} isInverse style={badgeStyles}>
          Danger
        </Badge>
        <Badge color={BadgeColor.success} isInverse style={badgeStyles}>
          Success
        </Badge>
        <Badge color={BadgeColor.info} isInverse style={badgeStyles}>
          Info
        </Badge>
        <Badge color={BadgeColor.warning} isInverse style={badgeStyles}>
          Warning
        </Badge>
      </div>
      <div style={{ ...badgeRowStyles, marginTop: '8px' }}>
        <Badge
          color={BadgeColor.primary}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Primary
        </Badge>
        <Badge
          color={BadgeColor.secondary}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Secondary
        </Badge>
        <Badge
          color={BadgeColor.light}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light
        </Badge>
        <Badge
          color={BadgeColor.danger}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Danger
        </Badge>
        <Badge
          color={BadgeColor.success}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Success
        </Badge>
        <Badge
          color={BadgeColor.info}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Info
        </Badge>
        <Badge
          color={BadgeColor.warning}
          isInverse
          style={badgeStyles}
          weight={BadgeWeight.light}
        >
          Light Warning
        </Badge>
      </div>
    </Container>
  );
}

Badge Props

This component uses forwardRef. The ref is applied to the button or span element. The wrapping element will be either a button or a span depending on if an onClick function is provided as prop.

If an onClick prop is provided, all of the standard button attributes can be provided as props and will be applied to the button element that gets rendered.

If not, all of the global HTML attributes can be provided as props and will be applied to the wrapping span element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

color

Description

The color variant of the badge

Type

enum, one of:
BadgeColor.danger
BadgeColor.info
BadgeColor.light
BadgeColor.primary
BadgeColor.secondary
BadgeColor.success
BadgeColor.warning

Default

BadgeColor.primary

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

leftIcon

Description

Icon to display on the left side of the badge

Type

ReactElement

Default

-

onClick

Description

Action that fires when the badge is clicked. Causes the Badge to render as a button instead of a span.

Type

function

Default

-

rightIcon

Description

Icon to display on the right side of the badge

Type

ReactElement

Default

-

variant

Description

Indicates the style variant of the component

Type

enum, one of:
BadgeVariant.counter
BadgeVariant.label

Default

BadgeVariant.label

weight

Description

Indicates the visual weight of the component

Type

enum, one of:
BadgeWeight.default
BadgeWeight.light

Default

BadgeWeight.default

On this page

Deploys by Netlify