Preview
Props
Install
npx shadcn@latest add @evilbuttons/frame-buttonUsage
Button
import { FrameButton } from "@/components/evil-buttons/frame-button";
export function ButtonDemo() {
return <FrameButton>Get Started</FrameButton>;
}Link
import { FrameButton } from "@/components/evil-buttons/frame-button";
export function ButtonDemo() {
return (
<FrameButton as="link" href="https://github.com/radiumcoders/evil-buttons">
Star on GitHub
</FrameButton>
);
}Variants
secondary
Fills in with the foreground color on hover.
outline
Glow
Props
The component spreads native button props, or anchor props when as="link".
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button content. |
variant | "default" | "secondary" | "outline" | "default" | Visual style of the button. |
glow | boolean | false | Blooms a soft glow behind the button on hover. |
size | number | string | 14 | Corner marker size in px, or a Tailwind size class like "size-4". |
offset | number | 6 | Distance in px the markers sit outside the button's edge. |
hoverOffset | number | 5 | How far in px the markers spread on hover. |
as | "button" | "link" | "button" | Renders a button or a Next.js Link. |
href | Route | UrlObject | - | Link destination when as="link". |
className | string | - | Extra classes passed to the root element. |
Good to know
FrameMarkersis exported on its own.- Markers are borders, not icons, so they stay crisp at any size.