MinimalButton is built from light and edge rather than color. A graded dark surface sits inside a black hairline ring, a faint inner ring and a brighter top highlight catch the light, and a small soft shadow lifts it off the page. A muted chevron trails the label and nudges forward on hover.
Preview
Props
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/minimalUsage
import MinimalButton from "@/components/evil-buttons/minimal";
export function ButtonDemo() {
return <MinimalButton>Browse components</MinimalButton>;
}Variants
No arrow
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button label. |
arrow | boolean | true | Show a trailing chevron that nudges forward on hover. |
className | string | - | Extra classes passed to the button. |
Notes
- The ring, inner highlight, and drop shadow are one layered
box-shadow, so the button needs no extra wrapper elements. - The surface stays dark in both themes; the black hairline and inner ring keep its edge crisp on dark pages.
Registry
The registry item includes components/evil-buttons/minimal.tsx and installs clsx and tailwind-merge as dependencies. The component imports cn from @/lib/utils, matching the project alias in components.json.