Button

Button is a native button in pixel caps on a dithered drop shadow. Hover lifts it out of the shadow, pressing pushes it in, and disabled lays it flat. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"

<Button>Save</Button>
<Button variant="outline">Cancel</Button>
<Button size="sm">Small</Button>
<Button disabled>Locked</Button>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add button

Props

It renders a native element, so every other attribute that element takes passes through.