InfoPopover

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The button is named by label, which says what it explains. The panel opens on press; it works on touch screens and with the keyboard too.

Field label

LightDark

Copy code

import { InfoPopover } from '@bigbang/ui';

export default function Default() {
  return (
    <span className="inline-flex items-center gap-xs type-label-md">
      Field label
      <InfoPopover label="About the field label" title="Field label">
        A short explanation of why this field is asked for and how to fill it in goes here.
      </InfoPopover>
    </span>
  );
}

Help icon

icon="circle-help" explains how to fill in a field. Without a title the panel is named by the button label.

Value

LightDark

Copy code

import { InfoPopover } from '@bigbang/ui';

export default function Help() {
  return (
    <span className="inline-flex items-center gap-xs type-body-md">
      Value
      <InfoPopover label="About the field label" icon="circle-help" side="bottom">
        A short explanation of why this field is asked for and how to fill it in goes here.
      </InfoPopover>
    </span>
  );
}

Light and dark mode

The panel uses the same tokens as Popover.

Light

Field label

Dark

Field label

Copy code

import { InfoPopover } from '@bigbang/ui';

export default function Default() {
  return (
    <span className="inline-flex items-center gap-xs type-label-md">
      Field label
      <InfoPopover label="About the field label" title="Field label">
        A short explanation of why this field is asked for and how to fill it in goes here.
      </InfoPopover>
    </span>
  );
}