Skip to main content

Badge

The Badge component is a small label used to display additional information, such as a status, count, or tag.

Import​

Phaselis exports one main component for Badge.

import { Badge } from "phaselis";
  • Badge: Main Component import for Badge

Usage​

Basic Badge​

import { Badge, Avatar } from "phaselis";

const Example = () => {
  return (
    <Badge text="999+" variation="secondary" left={-20} top={-4}>
      <Avatar text="NA" />
    </Badge>
  );
};

export default Example;

Badge with Input Field​

import { Badge, Textfield } from "phaselis";

const Example = () => {
  return (
    <Badge text="1" variation="primary" left={-15} top={-4}>
      <Textfield />
    </Badge>
  );
};

export default Example;

Props​

Badge has several customizable props to define its appearance and behavior.

text required​

string

The text displayed inside the badge.

import { Avatar } from "phaselis";
<Badge text="9+">
  <Avatar text="NA" />
</Badge>

children required​

ReactNode

The component or content that the badge is associated with.

import { Avatar } from "phaselis";
<Badge text="xxx">
  <Avatar text="SY" />
</Badge>

variation​

default | default_outline | primary | primary_outline | secondary | secondary_outline | tertiary | tertiary_outline

Determines the style of the badge.

  • default: Applies the default badge style.
  • default_outline: Applies the default badge style with an outline.
  • primary: Applies the primary badge style.
  • primary_outline: Applies the primary badge style with an outline.
  • secondary: Applies the secondary badge style.
  • secondary_outline: Applies the secondary badge style with an outline.
  • tertiary: Applies the tertiary badge style.
  • tertiary_outline: Applies the tertiary badge style with an outline.
<Badge text="99+" variation="secondary_outline">
  <Avatar text="NA" />
</Badge>

style​

NameTypeDescription
containerViewStyleThe style for the badge's container element.
elementViewStyleThe style applied to the badge itself.
textTextStyleThe style applied to the text inside the badge.
leftIconTextStyleThe style applied to the left icon.
rightIconTextStyleThe style applied to the right icon.

You can style the badge with the style prop.

// Object with named styles
<Badge
  text="999+"
  style={{
    element: {
      backgroundColor: "#2a91ff",
    },
    text: {
      color: "#d8eeff",
    },
  }}
>
  <Avatar text="VA" />
</Badge>

// Direct element styling
<Badge
  text="New"
  style={{ backgroundColor: "red", borderRadius: 4, padding: 5 }}
>
  <Avatar text="VA" />
</Badge>

containerStyle​

ViewStyle

Additional style applied directly to the outer container.

<Badge text="9+" containerStyle={{ margin: 10 }}>
  <Avatar text="VA" />
</Badge>

textStyle​

TextStyle

Additional style applied directly to the badge text.

<Badge text="New" textStyle={{ fontWeight: 'bold' }}>
  <Avatar text="VA" />
</Badge>

leftIconStyle​

TextStyle

Additional style applied directly to the left icon.

<Badge leftIcon="Bell" leftIconStyle={{ color: '#FF5733' }}>
  <Avatar text="VA" />
</Badge>

rightIconStyle​

TextStyle

Additional style applied directly to the right icon.

<Badge rightIcon="AlertCircle" rightIconStyle={{ color: '#FF5733' }}>
  <Avatar text="VA" />
</Badge>

top | right | bottom | left​

number

Optional positioning values to adjust the badge’s placement.

import { Avatar } from "phaselis";
<Badge text="9+" tertiary outline left={-25} top={1}>
  <Avatar text="VA" />
</Badge>