# LinkButton

A native anchor styled with Fluent Button chrome for a real, navigable link.

## Default

Source: CoreAI.

`LinkButton` renders a native `<a>` — not a `<button>` — so it's a real,
navigable, keyboard- and screen-reader-friendly link (works with
ctrl/cmd-click, "open in new tab", `rel`, crawlers, …) while preserving the
complete Fluent `Button` content and visual API.

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

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

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.

```ts
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](/coreai-design-system/guides/Package.md).

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

## Appearance

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--appearance.tsx)

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

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--disabled.tsx)

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

Source: CoreAI.

Set `external` to append an external-link icon and default the native anchor
to `target="_blank"` with `rel="noopener noreferrer"`.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--external.tsx)

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

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--shape.tsx)

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

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--size.tsx)

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

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-linkbutton--variants.tsx)

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