Default

Loading interactive example. Full source is available below.

View example source
Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { LinkButton } from "@coreai-ds/react-components";
import { ArrowRightRegular } from "@fluentui/react-icons";

export const Default = (): JSXElement => (<LinkButton href="/get-started" icon={<ArrowRightRegular />} iconPosition="after">
      Get started
    </LinkButton>);

export default Default;
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.

LinkButton API

A native anchor with the complete CoreAI Button visual and content API.

interface LinkButtonProps {
  /**
   * A button can have its content and borders styled for greater emphasis or to be subtle.
   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
   * - 'primary': Emphasizes the button as a primary action.
   * - 'outline': Removes background styling.
   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
   * - 'transparent': Removes background and border styling.
   * @default 'secondary'
   */
  appearance?: "outline" | "subtle" | "secondary" | "primary" | "transparent";

  /**
   * An anchor-compatible component used to render the root.
   */
  as?: ElementType<NativeAnchorProps, keyof IntrinsicElements>;

  children?: ReactNode;

  className?: string;

  /**
   * A button can show that it cannot be interacted with.
   * @default false
   */
  disabled?: boolean;

  /**
   * When set, allows the button to be focusable even when it has been disabled.
   * This is used in scenarios where it is important to keep a consistent tab order
   * for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * @default false
   * false
   */
  disabledFocusable?: boolean;

  /**
   * When `true`, renders an external-link icon after the content and defaults
   * `target` to `_blank` and `rel` to `noopener noreferrer`.
   */
  external?: boolean;

  /**
   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * A button can format its icon to appear before or after its content.
   * @default 'before'
   */
  iconPosition?: "before" | "after";

  ref?: Ref<HTMLAnchorElement>;

  /**
   * A button can be rounded, circular, or square.
   * @default 'rounded'
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * A button supports different sizes.
   * @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.

Appearance

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

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

const appearances = ['secondary', 'primary', 'outline', 'subtle', 'transparent'] as const;

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

    .link-button-appearance-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-appearance-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-appearance-example">
        {appearances.map((appearance) => (<div key={appearance} className="link-button-appearance-example__column">
            <p className="link-button-appearance-example__heading">{appearance}</p>
            <LinkButton appearance={appearance} href="https://example.com">
              Visit site
            </LinkButton>
          </div>))}
      </div>
    </>);
};

export default Appearance;

Disabled

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

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

const appearances = ['secondary', 'primary', 'outline', 'subtle', 'transparent'] as const;

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

    .link-button-disabled-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-disabled-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-disabled-example">
        {appearances.map((appearance) => (<div key={appearance} className="link-button-disabled-example__column">
            <p className="link-button-disabled-example__heading">{appearance}</p>
            <LinkButton appearance={appearance} disabled href="https://example.com">
              Visit site
            </LinkButton>
          </div>))}
      </div>
    </>);
};

export default Disabled;

External

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { LinkButton } from "@coreai-ds/react-components";

export const External = (): JSXElement => (<LinkButton external href="https://example.com">
      Visit external site
    </LinkButton>);

export default External;

Shape

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

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

const shapes = ['rounded', 'circular', 'square'] as const;

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

    .link-button-shape-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-shape-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-shape-example">
        {shapes.map((shape) => (<div key={shape} className="link-button-shape-example__column">
            <p className="link-button-shape-example__heading">{shape}</p>
            <LinkButton shape={shape} href="https://example.com">
              Visit site
            </LinkButton>
          </div>))}
      </div>
    </>);
};

export default Shape;

Size

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

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

const sizes = ['small', 'medium', 'large'] as const;

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

    .link-button-size-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-size-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-size-example">
        {sizes.map((size) => (<div key={size} className="link-button-size-example__column">
            <p className="link-button-size-example__heading">{size}</p>
            <LinkButton size={size} href="https://example.com">
              Visit site
            </LinkButton>
          </div>))}
      </div>
    </>);
};

export default Size;

Variants

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

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

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

    .link-button-variants-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-variants-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-variants-example">
        <div className="link-button-variants-example__column">
          <p className="link-button-variants-example__heading">default (secondary)</p>
          <LinkButton href="https://example.com">Visit site</LinkButton>
        </div>

        <div className="link-button-variants-example__column">
          <p className="link-button-variants-example__heading">primary</p>
          <LinkButton appearance="primary" href="https://example.com">
            Get started
          </LinkButton>
        </div>

        <div className="link-button-variants-example__column">
          <p className="link-button-variants-example__heading">subtle</p>
          <LinkButton appearance="subtle" href="https://example.com">
            Learn more
          </LinkButton>
        </div>
      </div>
    </>);
};

export default Variants;