Badge

Usage

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

Edit live code

Variations

Custom Variant

Custom variants can be defined in your theme using the variants property.

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

const Example = () => {
  const theme = createTheme({
    badge: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
          borderColor: 'goldenrod'
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Badge variant="golden">Gold</Badge>
    </ThemeProvider>
  );
};
import { createTheme, Badge } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    badge: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
          borderColor: 'goldenrod'
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Badge variant="golden">Gold</Badge>
    </ThemeProvider>
  );
};

Properties

Tokens

Theme tokens