Skip to content

Action Link

A link styled as a button, for actions that go somewhere.

See the menu Plan a visit

import { ActionLink } from '@brand-studio/ui';

export default function ActionLinkDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <ActionLink href="#menu">See the menu</ActionLink>
      <ActionLink href="#visit" tone="secondary">Plan a visit</ActionLink>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, ActionLink } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { ActionLink } from '@brand-studio/ui';

<ActionLink href="/menu">See the menu</ActionLink>

Accessibility

Renders an <a>. Use it when the action goes to another page; use Button when it changes something here.

API Reference

Prop	Type	Default
`href`	`string`	–
`tone?`	`"inverse" \| "primary" \| "secondary"`	`'primary'`
`shape?`	`"default" \| "pill"`	`'default'`

Also accepts every AnchorHTMLAttributes<HTMLAnchorElement> attribute.