Skip to content

Issue 25 create button components #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KushPatel-18 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Issue 25 create button components #40

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e42ff92
Implemented Tab button variants
KushPatel-18 Jul 11, 2026
cb88aaa
Implemented Pagination Button Variants
KushPatel-18 Jul 11, 2026
909f185
Implemented CTA button variant and size for tab and pagination
KushPatel-18 Jul 11, 2026
37d1fdc
Merge branch 'main' into issue-25-Create_Button_Components
KushPatel-18 Jul 18, 2026
d89fd91
Updated colours based on tailwind config
KushPatel-18 Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions client/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";

const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

{
variants: {
variant: {
Expand All @@ -14,16 +15,36 @@ const buttonVariants = cva(
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",

// Tab variants
primary:
"rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-primary bg-primary text-gray-900",
secondary:
"rounded-xl border px-5 py-2 text-sm font-semibold transition-colors border-secondary bg-white text-gray-700 hover:border-primary hover:bg-secondary",
primaryFilter: "rounded-full border border-primary bg-primary",
secondaryFilter:
"h-10 w-10 px-1 py-1 rounded-full border border-secondary bg-white hover:bg-secondary hover:border-primary text-gray-900",

// Pagination Variants
paginationActive: "border border-accent bg-accent text-white",
paginationInactive:
"border border-accent/15 text-gray-600 hover:border-accent hover:accent hover:bg-accent/10",
paginationEndpoint:
"border border-gray-200 text-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40",

// Call to Action (CTA) Variant
cta: "rounded-full px-5 py-2 border border-accent bg-accent text-white font-bold opacity-70 hover:opacity-100 transition-opacity duration-200 ease-in-out",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
tab: "h-10 w-10",
pagination: "h-8 w-8",
inline: "h-auto w-auto p-0",
},
},
defaultVariants: {
Expand Down
Loading