FloatingBadge

A floating badge allows the user to position a badge relative to another component.

AI Tip Want to skip the docs? Use the MCP Server

Anatomy

Structure

<FloatingBadge>
    <Component /> /* (Required) The component to which the badge is attached */
    <Badge /> /* (Required) The badge of the floating badge */
</FloatingBadge>

Composed Components

A FloatingBadge uses the following components:

Badge

A badge is used to bring attention to an element.

Usage

Placement

A floating badge can be positioned relative to another component using the placement prop. This allows the badge to be placed in any of the 4 positions around the target component.

Overlap

Allows you to specify whether the badge overlaps a rectangular or circular component.

Offset

The position of the badge can be adjusted using the offset prop. This prop accepts an object with x and y properties that will be used to adjust the badge's position.

Props

offset?

The offset of the badge from the anchor component. [horizontal, vertical]

overlap?

The wrapped shape that the badge should overlap.

Defaults to rectangular.

placement?

The placement of the badge relative to the anchor component.

Defaults to top right.

children?

The children of the component.

className?

The CSS className for the element.

style?

The inline style for the element.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

highlight is not supported.
pushed is not supported.
reverse is not supported, use flex-direction or row-reverse instead.
size is not supported.
variant has different values.
icon variant it not supported.
wrapperProps has been removed.
Badge is no longer floating. Use the FloatingBadge component to add this feature.
FloatingBadge has new props such as placement and offset.
overlap is used inside FloatingBadge and the new values are circular and rectangular.