Info button Preview
An info button is a recognizable icon that lets someone know when there is supplemental information available. When people interact with the info button, the information is surfaced in a popover.
Because the popover isn't always visible, don't include information that people must know in order to complete the field. To give people a hint about how to fill in a field, or to let them know what values can be entered, try placeholder or helper text instead.
Loading...
Properties
as
“button”
Default:
noneinfo
The information to be displayed in the PopoverSurface when the button is pressed.
WithSlotShorthandValue<WithSlotRenderFunction<Omit<PopoverSurfaceSlots, "root"> & Omit<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, "ref"> & RefAttributes<...>>>Default:
nonepopover
The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
WithSlotShorthandValue<Partial<PopoverProps>>Default:
nonesize
Size of the InfoButton.
“small”
“medium”
“large”
Default:
“medium”