Hover Card

Overlays · HoverCard, Avatar, Badge

A preview card that opens when the pointer rests on a trigger (a name, a link) or when it gets keyboard focus, and closes when the pointer or focus leaves or on Escape.

Use it for supplementary details only; the trigger must still lead somewhere on its own.
openDelay and closeDelay tune the timing; the card stays inside the screen on narrow layouts.

PreviewCode

Assigned to @mara by the pricing workflow. Hover or focus the name to see the card.

Props

Prop	Type	Notes
`trigger`	`ReactNode`	The element that opens the card on hover and keyboard focus.
`children?`	`ReactNode`
`side?`	`"top" \| "bottom"`
`align?`	`"start" \| "center" \| "end"`
`openDelay?`	`number`
`closeDelay?`	`number`
`width?`	`number`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Avatar

Prop	Type	Notes
`name`	`string`	Required
`src?`	`string`
`size?`	`number`
`tint?`	`Tint \| "surface-sunken"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Badge

Prop	Type	Notes
`tone?`	`Tone`
`dot?`	`boolean`
`live?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.