Badge

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Badge>
    <Icon name="pack-mobile-app-inbox" size="32" />
  </Badge>
</div>

Inline

Code

<div>
  <Badge /> Just some long text with <Badge /> badges inside and around{" "}
  <Badge />
</div>

Text

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Badge text="18 New">
    <Icon name="pack-mobile-app-inbox" size="32" />
  </Badge>
</div>

Sizes

Code

<FlexWrapper gap={20}>
  <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>
</FlexWrapper>

Position Offset

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Badge positionOffset="100%">
    <Icon name="pack-mobile-app-inbox" size="32" />
  </Badge>
</div>

Variants

Code

<div
  style={{
    display: "grid",
    gap: "20px",
    gridTemplateColumns: "repeat(4, 1fr)",
  }}
>
  <span
    style={{
      alignItems: "center",
      display: "inline-flex",
      flexDirection: "column",
    }}
  >
    <Typography className="mb-20" variant="h4">
      danger
    </Typography>
    <span style={{ display: "inline-block" }}>
      <Badge text="8" variant="danger">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>
    </span>
  </span>

  <span
    style={{
      alignItems: "center",
      display: "inline-flex",
      flexDirection: "column",
    }}
  >
    <Typography className="mb-20" variant="h4">
      info
    </Typography>
    <span style={{ display: "inline-block" }}>
      <Badge text="8" variant="info">
        <Icon name="pack-mobile-app-inbox" size="32" />
      </Badge>
    </span>
  </span>
</div>

API

Badge

Name	Type/Description
className	string | undefined
positionOffset	string | undefined
size = "regular"	BadgeSize | undefined
style	CSSProperties | undefined
text	string | number | undefined
variant = "danger"	BadgeVariant | undefined