Shadcn Button
Buttons use the shadcn Button component from @/components/Shadcn/button.
import { Plus } from 'lucide-react';
import { Button } from '@/components/Shadcn/button';
<Button variant="default">
<Plus className="size-4" />
Add event
</Button>
<Button variant="default" isLoading>
Save changes
</Button>Variants
Button variants used in CESS FRSah admin actions.
Primary
<Button variant="default">Save changes</Button>Secondary
<Button variant="outline">Export</Button>Destructive
<Button variant="destructive">Reject</Button>Ghost
<Button variant="ghost">Cancel</Button>Link
<Button variant="link">View details</Button>With icons
Primary and secondary actions with Lucide icons.
Primary action
<Button variant="default">
<UserPlus className="size-4" />
Enrollment requests
</Button>Create action
<Button variant="default">
<Plus className="size-4" />
Add event
</Button>Send action
<Button variant="default">
<Send className="size-4" />
Send message
</Button>Secondary action
<Button variant="outline">
<FileOutput className="size-4" />
Export
</Button>Destructive action
<Button variant="destructive">
<X className="size-4" />
Reject
</Button>Sizes
Compact sizes used across admin pages.
Extra small
<Button variant="default" size="xs">Button</Button>Small
<Button variant="default" size="sm">Button</Button>Default
<Button variant="default">Button</Button>Large
<Button variant="default" size="lg">Button</Button>States
Interactive states for buttons.
Disabled primary
<Button variant="default" disabled>Save changes</Button>Disabled secondary
<Button variant="outline" disabled>Export</Button>Loading
Click a button to see disabled + spinner while an action is in progress.
Primary loading
<Button variant="default">Save changes</Button>Secondary loading
<Button variant="outline">Export</Button>Destructive loading
<Button variant="destructive">Reject</Button>