The Badge component is designed to wrap other components and display notifications or status indicators, such as alerts, unread counts, or status messages.

Usage

Import

import { Badge } from '@passfort/castle'
content_copy
Copy

Notification

Indicates the presence of a notification or status by displaying a dot.

<Badge>
  <Button label="Button" />
</Badge>
<Badge>
  <Button label="Button" />
</Badge>
content_copy
Copy
live example

Notification with Content

Displays a badge with a numerical or textual indicator, providing more specific information about the status.

<Badge content={3}>
  <DropdownMenu title="Select one" items={selectUsers}>
    <DropdownButton label="Select" />
  </DropdownMenu>
</Badge>
<Badge content={3}>
  <DropdownMenu title="Select one" items={selectUsers}>
    <DropdownButton label="Select" />
  </DropdownMenu>
</Badge>
content_copy
Copy
live example

Not Showing Notification

Toggles the visibility of the badge, allowing you to hide it when not needed.

function Example() {
  const [visible, setVisible] = useState(true)

  return (
    <Badge content={visible ? 1 : null} invisible={!visible}>
      <Button label="Toggle Badge" onClick={() => setVisible(!visible)} />
    </Badge>
  )
}
function Example() {
  const [visible, setVisible] = useState(true)

  return (
    <Badge content={visible ? 1 : null} invisible={!visible}>
      <Button label="Toggle Badge" onClick={() => setVisible(!visible)} />
    </Badge>
  )
}
content_copy
Copy
live example

Customizing Badge Color

Customize the color of the badge to match different statuses or themes.

<Badge color="B100" content="New">
  <Button icon="notifications" />
</Badge>
<Badge color="B100" content="New">
  <Button icon="notifications" />
</Badge>
content_copy
Copy
live example

Accessibility Considerations

Ensure that the Badge component is accessible by providing appropriate ARIA attributes and roles.

<Badge content={5} aria-label="5 new notifications">
  <Button icon="notifications" />
</Badge>
<Badge content={5} aria-label="5 new notifications">
  <Button icon="notifications" />
</Badge>
content_copy
Copy
live example