Home
Dashboard
⌘K
Jump to
MessagesMark all read
DF
Daniel Foster
Client schedule updated for…
AS
Rachel Morgan
Can we add a 7 AM yoga slot?
Buttons
Primary Buttons Sizes
<div class="flex items-end gap-12">
<button type="button" class="btn-sm bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
<button type="button" class="btn-lg bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
</div>
Circular Buttons Sizes
<div class="flex items-end gap-12">
<button type="button" class="w-7.5 h-7.5 flex justify-center items-center bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="w-8.75 h-8.75 flex justify-center items-center bg-primary border border-primary text-white text-center text-lg hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="w-11 h-11 flex justify-center items-center bg-primary border border-primary text-white text-center text-xl hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
</div>
Default Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Primary</button>
<button type="button" class="btn bg-[var(--surface)] border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white">Dark</button>
<button type="button" class="btn bg-[var(--surface)] border border-[var(--border)] text-dark text-center hover:bg-[var(--card2)] hover:border-light-800 hover:text-dark">Light</button>
<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info</button>
<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning</button>
<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success</button>
<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error</button>
</div>
Outline Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-transparent border border-primary c-gold text-center hover:bg-primary-100">Primary</button>
<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100">Dark</button>
<button type="button" class="btn bg-transparent border border-[var(--border)] text-gray-700 text-center hover:bg-[var(--card2)]">Light</button>
<button type="button" class="btn bg-transparent border border-info c-cyan text-center hover:bg-info-100">Info</button>
<button type="button" class="btn bg-transparent border border-warning c-orange text-center hover:bg-warning-100">Warning</button>
<button type="button" class="btn bg-transparent border border-success c-green text-center hover:bg-success-100">Success</button>
<button type="button" class="btn bg-transparent border border-danger c-red text-center hover:bg-danger-100">Error</button>
</div>
Ghost Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary-100 border border-primary c-gold text-center hover:bg-primary-200">Primary</button>
<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200">Dark</button>
<button type="button" class="btn bg-[var(--card2)] border border-[var(--border)] text-dark text-center hover:bg-gray-200">Light</button>
<button type="button" class="btn bg-info-100 border border-info c-cyan text-center hover:bg-info-200">Info</button>
<button type="button" class="btn bg-warning-100 border border-warning c-orange text-center hover:bg-warning-200">Warning</button>
<button type="button" class="btn bg-success-100 border border-success c-green text-center hover:bg-success-200">Success</button>
<button type="button" class="btn bg-danger-100 border border-danger c-red text-center hover:bg-danger-200">Error</button>
</div>
Rounded Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full">Primary</button>
<button type="button" class="btn bg-[var(--surface)] border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white rounded-full">Dark</button>
<button type="button" class="btn bg-[var(--surface)] border border-[var(--border)] text-dark text-center hover:bg-[var(--card2)] hover:border-light-800 hover:text-dark rounded-full">Light</button>
<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white rounded-full">Info</button>
<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white rounded-full">Warning</button>
<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white rounded-full">Success</button>
<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white rounded-full">Error</button>
</div>
Outline Round Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-transparent border border-primary c-gold text-center hover:bg-primary-100 rounded-full">Primary</button>
<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100 rounded-full">Dark</button>
<button type="button" class="btn bg-transparent border border-[var(--border)] text-gray-700 text-center hover:bg-[var(--card2)] rounded-full">Light</button>
<button type="button" class="btn bg-transparent border border-info c-cyan text-center hover:bg-info-100 rounded-full">Info</button>
<button type="button" class="btn bg-transparent border border-warning c-orange text-center hover:bg-warning-100 rounded-full">Warning</button>
<button type="button" class="btn bg-transparent border border-success c-green text-center hover:bg-success-100 rounded-full">Success</button>
<button type="button" class="btn bg-transparent border border-danger c-red text-center hover:bg-danger-100 rounded-full">Error</button>
</div>
Ghost Round Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary-100 border border-primary c-gold text-center hover:bg-primary-200 rounded-full">Primary</button>
<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200 rounded-full">Dark</button>
<button type="button" class="btn bg-[var(--card2)] border border-[var(--border)] text-dark text-center hover:bg-gray-200 rounded-full">Light</button>
<button type="button" class="btn bg-info-100 border border-info c-cyan text-center hover:bg-info-200 rounded-full">Info</button>
<button type="button" class="btn bg-warning-100 border border-warning c-orange text-center hover:bg-warning-200 rounded-full">Warning</button>
<button type="button" class="btn bg-success-100 border border-success c-green text-center hover:bg-success-200 rounded-full">Success</button>
<button type="button" class="btn bg-danger-100 border border-danger c-red text-center hover:bg-danger-200 rounded-full">Error</button>
</div>
Default Buttons with Left Icon
<div class="flex items-end gap-9">
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Primary</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Dark</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--card2)] border border-[var(--border)] text-dark text-center hover:bg-[var(--card2)] hover:border-light-800 hover:text-dark"><i data-lucide="chevron-left" class="w-4 h-4"></i>Light</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Info</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Warning</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Success</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white"><i data-lucide="chevron-left" class="w-4 h-4"></i>Error</button>
</div>
Default Buttons with Right Icon
<div class="flex items-end gap-9">
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Primary<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--surface)] border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white">Dark<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--surface)] border border-[var(--border)] text-dark text-center hover:bg-[var(--card2)] hover:border-light-800 hover:text-dark">Light<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error<i data-lucide="chevron-right" class="w-4 h-4"></i></button>
</div>