Badge

Badge displays a small notification indicator either inline with text or positioned over another element.

Code

import { Badge, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Badge>
      <Icon name="pack-mobile-app-inbox" size="32" />
    </Badge>
  );
}

Inline

Code

import { Badge } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div>
      <Badge /> Just some long text with <Badge /> badges inside and around{" "}
      <Badge />
    </div>
  );
}

Text

Code

import { Badge, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Badge text="18 New">
      <Icon name="pack-mobile-app-inbox" size="32" />
    </Badge>
  );
}

Sizes

Code

import { Badge, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:gap-5">
      <Badge size="regular" text="regular">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>

      <Badge size="small" text="small">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>

      <Badge>
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>
    </div>
  );
}

Position Offset

Code

import { Badge, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Badge positionOffset="100%">
      <Icon name="pack-mobile-app-inbox" size="32" />
    </Badge>
  );
}

Variants

Code

import { Badge, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:gap-10">
      <Badge text="danger" variant="danger">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>

      <Badge text="info" variant="info">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>
    </div>
  );
}

API

Badge

Props

children

children?: undefined | React.ReactNode

className

className?: string

positionOffset

positionOffset?: undefined | string

size

size?: BadgeSize = "regular"

style

style?: React.CSSProperties

text

text?: string | number

variant

variant?: BadgeVariant = "danger"