OdysseyUI

Button

An animated button component with multiple variants including the signature OdysseyUI glossy style.

Loading...

Installation

Usage

import { Button } from '@/components/odysseyui/components/buttons/button';

export default function Page() {
  return <Button variant="odysseyui">Get Started</Button>;
}

Variants

<Button variant="default">Default</Button>
<Button variant="accent">Accent</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
<Button variant="odysseyui">OdysseyUI</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><SearchIcon /></Button>

API Reference

Button

PropTypeDefault
variant?
"default" | "accent" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "odysseyui"
"default"
size?
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg"
"default"
hoverScale?
number
1.05
tapScale?
number
0.95
asChild?
boolean
false

Built by Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 3/16/2026