# Info button

A button that reveals supplemental information in a popover.

## Behavior and states

- When someone selects the info button, a popover appears and remains visible until they select something else or press Esc.
- Popovers can include formatting and links.
- Make sure the info button is included in the page’s tab order.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-infobutton--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { InfoButton } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";

export const Default = () => (<InfoButton aria-label="More information about pricing" info={<>
          Pricing is billed monthly per seat.{' '}
          <Link href="https://react.fluentui.dev">Learn more</Link>
        </>}/>);

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### InfoButton API

A button that reveals supplemental information in a Popover. Requires an
accessible name via `aria-label` or `aria-labelledby`.

```ts
interface InfoButtonProps {
  /**
   * Defines a string value that labels the current element.
   */
  "aria-label"?: string;

  /**
   * Identifies the element (or elements) that labels the current element.
   */
  "aria-labelledby"?: string;

  as?: "button";

  children?: any;

  className?: string;

  /**
   * The information to be displayed in the PopoverSurface when the button is pressed.
   */
  info?: NonNullable<WithSlotShorthandValue<Omit<PopoverSurfaceSlots, "root"> & Omit<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }, "ref"> & RefAttributes<HTMLDivElement>> | null> | undefined;

  /**
   * Whether the InfoButton should be rendered inline or on a Portal.
   * @default true
   */
  inline?: boolean;

  /**
   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
   */
  popover?: NonNullable<WithSlotShorthandValue<Partial<Omit<PopoverProps, "openOnHover">>> | null>;

  ref?: Ref<HTMLButtonElement>;

  /**
   * Size of the InfoButton.
   * @default medium
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Primitive Info

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-infobutton--primitive-info.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { InfoButton } from "@coreai-ds/react-components";

export const PrimitiveInfo = () => {
    const styles = /* css */ `
      .info-button-primitive-example__row {
        display: flex;
        align-items: center;
        column-gap: var(--spacingHorizontalS);
      }

      .info-button-primitive-example__label {
        font-size: var(--fontSizeBase300);
        color: var(--colorNeutralForeground1);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="info-button-primitive-example__row">
          <span className="info-button-primitive-example__label">Username</span>
          <InfoButton aria-label="More information about usernames" info="Your username must be unique and is visible to other members."/>
        </div>
      </>);
};

export default PrimitiveInfo;
```

## Sizes

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-infobutton--sizes.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { InfoButton } from "@coreai-ds/react-components";

export const Sizes = () => {
    const styles = /* css */ `
      .info-button-sizes-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        align-items: flex-start;
        padding: var(--spacingVerticalL);
      }

      .info-button-sizes-example__row {
        display: flex;
        align-items: center;
        column-gap: var(--spacingHorizontalS);
      }

      .info-button-sizes-example__label {
        font-size: var(--fontSizeBase300);
        color: var(--colorNeutralForeground1);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="info-button-sizes-example">
          <div className="info-button-sizes-example__row">
            <span className="info-button-sizes-example__label">Small</span>
            <InfoButton size="small" aria-label="Small info button" info="Example small InfoButton."/>
          </div>
          <div className="info-button-sizes-example__row">
            <span className="info-button-sizes-example__label">Medium</span>
            <InfoButton size="medium" aria-label="Medium info button" info="Example medium InfoButton."/>
          </div>
          <div className="info-button-sizes-example__row">
            <span className="info-button-sizes-example__label">Large</span>
            <InfoButton size="large" aria-label="Large info button" info="Example large InfoButton."/>
          </div>
        </div>
      </>);
};

export default Sizes;
```

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=77695-190112)
- [Fluent info label guidance](https://fluent2.microsoft.design/components/web/react/core/infolabel/usage)