LinkButton
View .mdA native anchor styled with Fluent Button chrome for a real, navigable link.
Default
Loading interactive example. Full source is available below.
View example 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.
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.
// 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.
// 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.
// 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.
// 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.
// 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.
// 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;