Info button | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// 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;

Resources

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.

API referenceGenerated CoreAI prop and type summaries

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.

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.

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

Primitive Info

Loading interactive example. Full source is available below.

Download source

// 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

Loading interactive example. Full source is available below.

Download source

// 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;