Badge

Demo

<Badge>
  Badge
</Badge>

Usage

Import the Badge primitive and styles.

import { Badge } from '@aws-amplify/ui-react';

export const DefaultBadgeExample = () => <Badge>Default badge</Badge>;

Variations

Use the variation prop to change the Badge variation. Available options are info, error, warning, success, and none (default).

import { Badge } from '@aws-amplify/ui-react';

export const BadgeVariationExample = () => (
  <>
    <Badge variation="info">Info</Badge>
    <Badge variation="error">Error</Badge>
    <Badge variation="warning">Warning</Badge>
    <Badge variation="success">Success</Badge>
    <Badge>Default</Badge>
  </>
);

Sizes

Use the size prop to change the Badge size. Available options are small, large, and none (default).

import { Badge } from '@aws-amplify/ui-react';

export const BadgeSizeExample = () => (
  <>
    <Badge size="small">Small</Badge>
    <Badge>Default</Badge>
    <Badge size="large">Large</Badge>
  </>
);

CSS Styling

Theme

You can customize the appearance of all Badge components in your application with a Theme.

import { Badge, ThemeProvider, Theme, Flex } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'badge-theme',
  tokens: {
    components: {
      badge: {
        // Default styles
        color: { value: '{colors.white}' },
        fontWeight: { value: '{fontWeights.normal}' },
        fontSize: { value: '{fontSizes.medium}' },
        backgroundColor: { value: '{colors.blue.80}' },
        paddingVertical: { value: '{space.small}' },
        paddingHorizontal: { value: '{space.medium}' },
        borderRadius: { value: '{radii.small}' },

        // Variations
        success: {
          color: { value: '{colors.black}' },
          backgroundColor: { value: '{colors.green.60}' },
        },

        // Sizes
        large: {
          fontSize: { value: '{fontSizes.xxl}' },
        },
      },
    },
  },
};

export const BadgeThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex alignItems="flex-end">
      <Badge>Default</Badge>
      <Badge variation="success">Success</Badge>
      <Badge size="large">Large</Badge>
    </Flex>
  </ThemeProvider>
);

Target classes

Global styling

To override styling on all Badges, you can set the Amplify CSS variables or use the built-in .amplify-badge class.

/* styles.css */
[data-amplify-theme] {
  --amplify-components-badge-background-color: yellow;
}
/* OR */
.amplify-badge {
  background-color: yellow;
}

To replace the Badge styling, unset it:

.amplify-badge {
  all: unset;
  /* Add your styling here*/
}

Local styling

To override styling on a specific Badge, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

Using a class selector:

/* styles.css */
.flagged {
  color: white;
  background-color: crimson;
  border-radius: 3px;
}

import './styles.css';

<Badge className="flagged">13</Badge>;

Using data attributes:

/* styles.css */
/* Override only info variation styles */
.amplify-badge[data-variation='info'] {
  background-color: rebeccapurple;
}

/* Override only large size styles */
.amplify-badge[data-size='large'] {
  border: 1px solid black;
}

import './styles.css';

<Badge variation="info">Purple background</Badge>
<Badge size="large">Black border</Badge>

Using style props:

import { Badge, useTheme } from '@aws-amplify/ui-react';

export const BadgeStyleProps = () => {
  const { tokens } = useTheme();
  return (
    <Badge
      backgroundColor={tokens.colors.secondary[20]}
      color={tokens.colors.secondary[90]}
    >
      Badge
    </Badge>
  );
};