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,
  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.light}>
            99+
          </Badge>
        </Button>
        <Button color={BadgeColor.secondary}>
          Messages
          <Badge variant={BadgeVariant.counter} color={BadgeColor.primary}>
            99+
          </Badge>
        </Button>
      </ButtonGroup>
    </>
  );
}

Colors

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

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>
    </>
  );
}

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, Container } from 'react-magma-dom';


export function Example() {
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <Badge color={BadgeColor.primary} isInverse>
        Primary
      </Badge>
      <Badge color={BadgeColor.secondary} isInverse>
        Secondary
      </Badge>
      <Badge color={BadgeColor.light} isInverse>
        Light
      </Badge>
      <Badge color={BadgeColor.danger} isInverse>
        Danger
      </Badge>
      <Badge color={BadgeColor.success} isInverse>
        Success
      </Badge>
    </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.light
BadgeColor.primary
BadgeColor.secondary
BadgeColor.success

Default

BadgeColor.primary

isInverse

Description

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

Type

boolean

Default

false

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

-

variant

Description

Indicates the style variant of the component

Type

enum, one of:
BadgeVariant.counter
BadgeVariant.label

Default

BadgeVariant.label

On this page

Deploys by Netlify