Badge

Badge allow users to differentiate or group items.

Usage

import { Badge } from '@elegantui/atoms';

Basic Example

import { Badge } from '@elegantui/atoms';

export default function App() {
  return <Badge text='Hello Friend' />;
}

Appearance

Badge component is available in six appearances.

import { Badge } from '@elegantui/atoms';

export default function App() {
  return (
    <Badge
      appearance='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
      text='Hello Friend'
    />
  );
}

Sizes

Badge component is available in three sizes.

import { Badge } from '@elegantui/atoms';

export default function App() {
  return (
    <Badge
      size='sm' // 'md' | 'lg'
      variant='primary'
      text='Hello Friend'
    />
  );
}

Custom styles

Badge component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

Available Props