Skip to content

Click Spark

Sparks fly from each click.

import { Button, ClickSpark } from '@brand-studio/ui';

export default function ClickSparkDemo() {
  return (
    <ClickSpark style={{ display: 'grid', placeItems: 'center', width: '100%', minHeight: 220 }}>
      <Button shape="pill">Click anywhere here</Button>
    </ClickSpark>
  );
}

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

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

Usage

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

<ClickSpark>
  <Button>Click</Button>
</ClickSpark>

Accessibility

Decorative only. Sparks are skipped under reduced motion.

API Reference

Prop	Type	Default
`sparks?`	`number`	`8`

Also accepts every HTMLAttributes<HTMLDivElement> attribute.