Badge

Badge allow users to differentiate or group items.

Usage

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

Basic Example

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

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

Appearance

Badge component is available in six appearances.

PrimarySecondaryErrorWarningSuccessDefault
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.

SmallMediumLarge
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.

Custom Styles

Available Props


PropValuesDefault
appearancedefault | primary | secondary | error | success | warningdefault
sizesm | md | lg md
textstring--
classNamestring--
styleReact.CSSProperties--