Preview Only: These components are for reference only. Continue using Orbiter in production until further notice.

FloatingBadge

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

View sourceView on npmReport an issue

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.