UIInternal UI

Widgets

InfoWrapper

@randall-enterprises/ui/components/widgets/info-wrapper

Labelled container: hairline border, label and optional icon top left, formatted value top right, anything below.

Props (9)

label *ReactNodeTop left.
iconReactNodeOptional, sits before the label.
valueReactNodeTop right. Omit it and the corner stays empty.
formatInfoWrapperFormatIgnored unless `value` is a number.
valuePlacement"end" | "label"Where the value sits: the header's far end, or right after the label.
actionsReactNodeControls in the top right, after the value.
childrenReactNode
contentClassNamestringFor padding or layout on the content region only.
toneSelectToneTints the glass. Omit for the plain wash.
Groceries$412.55

Wraps a budget, an account, a card group, or a row of stat tiles.

Revenue12.4%
Churn3.1%