Skip to content

Metal Button

A brushed-metal button whose sheen follows the pointer.

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

export default function MetalButtonDemo() {
  return <MetalButton>Order the kettle</MetalButton>;
}

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, MetalButton } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<MetalButton>Order the kettle</MetalButton>

Accessibility

A native button. The sheen follows the pointer; keyboard users get the same button without it.

API Reference

Prop	Type	Default

Also accepts every ButtonHTMLAttributes<HTMLButtonElement> attribute.