Badge

Usage

Badges will use the "default" variant by default, but you can use the available variants with the variant prop.

Edit live code
<Stack spaceBetween={2}>
  <Cluster spaceBetween={2}>
    <Badge>Default</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
  </Cluster>
  <Cluster spaceBetween={2}>
    <Badge variant="default-filled">Default filled</Badge>
    <Badge variant="info-filled">Info filled</Badge>
    <Badge variant="success-filled">Success filled</Badge>
    <Badge variant="warning-filled">Warning filled</Badge>
    <Badge variant="error-filled">Error filled</Badge>
  </Cluster>
</Stack>
<Stack spaceBetween={2}>
  <Cluster spaceBetween={2}>
    <Badge>Default</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
  </Cluster>
  <Cluster spaceBetween={2}>
    <Badge variant="default-filled">Default filled</Badge>
    <Badge variant="info-filled">Info filled</Badge>
    <Badge variant="success-filled">Success filled</Badge>
    <Badge variant="warning-filled">Warning filled</Badge>
    <Badge variant="error-filled">Error filled</Badge>
  </Cluster>
</Stack>

Variations

Variant mapping

You can map additional variant names to the default badge variants for badges using variants property. Provide the name of the new variant you want to support, and the name of the existing variant you wish to map it to.

import { createTheme, Badge } from '@kaluza-platform/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    badge: {
      variants: {
        accepted: 'success',
        rejected: 'error',
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Badge variant="accepted">Accepted</Badge>
    </ThemeProvider>
  );
};
import { createTheme, Badge } from '@kaluza-platform/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    badge: {
      variants: {
        accepted: 'success',
        rejected: 'error',
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Badge variant="accepted">Accepted</Badge>
    </ThemeProvider>
  );
};

Properties

Tokens

Theme tokens

Token	Default Value
badge.variants