FloatingBadge
A floating badge allows the user to position a badge relative to another component.
Props
- offset?
- overlap?
- placement?
- children?
- className?
- style?
- id?
The offset of the badge from the anchor component. [horizontal, vertical]
The wrapped shape that the badge should overlap.
The placement of the badge relative to the anchor component.
The children of the component.
The CSS className for the element.
The inline style for the element.
The element's unique identifier. See MDN.
- aria-label?
- aria-labelledby?
- aria-describedby?
- aria-details?
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
- slot?
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
Examples
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.