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