ButtonLink
The appearance of a button, with the semantics of a link.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { ButtonLink } from '@adaptavant/eds-core';
Variants
ButtonLink accepts all variants as <Button /> we recommend using only following 6 variants
{/* accentPrimary */}
<ButtonLink variant="accentPrimary" href="#">
Click me!
</ButtonLink>
{/* neutralPrimary */}
<ButtonLink variant="neutralPrimary" href="#">
Click me!
</ButtonLink>
{/* accentSecondary */}
<ButtonLink variant="accentSecondary" href="#">
Click me!
</ButtonLink>
{/* neutralSecondary */}
<ButtonLink variant="neutralSecondary" href="#">
Click me!
</ButtonLink>
{/* neutralSecondaryIntense */}
<ButtonLink variant="neutralSecondaryIntense" href="#">
Click me!
</ButtonLink>
{/* neutralTertiary */}
<ButtonLink variant="neutralTertiary" href="#">
Click me!
</ButtonLink>
Icons
The ButtonLink has iconStart and iconEnd props to set icons.
{/* iconStart */}
<ButtonLink href="#" iconStart={AddIcon}>
Click me!
</ButtonLink>
{/* iconEnd */}
<ButtonLink href="#" iconEnd={AddIcon}>
Click me!
</ButtonLink>
Size
Customise the size of the ButtonLink via the size prop.
{/* small */}
<ButtonLink href="#" size="small">
Click me!
</ButtonLink>
{/* standard */}
<ButtonLink href="#" size="standard">
Click me!
</ButtonLink>
{/* large */}
<ButtonLink href="#" size="large">
Click me!
</ButtonLink>
Adapting With Frameworks
ButtonLink is polymorphic and can render as different components using the as prop. This is particularly useful when integrating with framework-specific link components, like React Router or Next.js.
When you pass a component to the as prop, ButtonLink will render as that component and accept all of its props, as well as the component's usual props.
Using React Router's Link component
import { Link } from "react-router";
<ButtonLink as={Link} to="/settings">
Settings
</ButtonLink>
Using Next.js Link component
import NextLink from 'next/link';
<ButtonLink as={NextLink} href="/settings">
Settings
</ButtonLink>
This polymorphic behavior allows ButtonLink to maintain its styling and accessibility features while adapting to different routing systems or custom components.
API Reference
ButtonLink
| Prop | Type | Description | Default |
|---|---|---|---|
href | string | Set the hyperlink url. | _ |
variant? | 'accentPrimary' | 'accentSecondary'| 'criticalPrimary'| 'criticalTertiary'| 'neutralPrimary'| 'neutralSecondary'| 'neutralSecondaryIntense'| 'neutralTertiary' | Variant of the button. | 'accentPrimary' |
size? | 'large' | 'standard' | 'small' | Size of the button. | 'standard' |
iconStart? | Icon | The icon to display before the buttons children. | _ |
iconEnd? | Icon | The icon to display after the buttons children. | _ |
children? | ReactNode | The content to be displayed inside the link. | _ |
onBlur? | function | Function to call when the link loses focus. | _ |
onFocus? | function | Function to call when the link receives focus. | _ |
rel? | string | Specifies the relationship between the current document and the linked document/resource. | _ |
target? | '_self' | '_blank' | '_parent' | '_top' | Specifies where to open the linked document. | _ |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
ButtonLink parts
<ButtonLink
href="#"
size="small"
iconEnd={AddIcon}
variant="neutralPrimary"
iconStart={AddIcon}
classNames={{
iconStart: "fill-critical",
iconEnd: "fill-critical",
label: "text-critical",
labelTrack: "gap-2",
}}
>
Click me!
</ButtonLink>
| Stylable Parts | Description |
|---|---|
| label | The text content of the button. |
| labelTrack | The container that wraps the label. |
| iconStart | The icon displayed at the start of the button, before the label. |
| iconEnd | The icon displayed at the end of the button, after the label. |