Buttons

Overview

CmAdmin provides a set of custom button classes built on top of Bootstrap. These custom classes ensure consistent styling across the admin panel while leveraging Bootstrap's button foundation.

Important

Do not use Bootstrap button classes directly (e.g., btn-outline-primary, btn-outline-dark). Always use CmAdmin's custom button classes listed below to maintain design consistency.

Available Button Classes

Class	Description	Based On
btn-cta	Primary call-to-action button with solid background	Primary color filled
btn-primary	Primary outlined button	btn-outline-primary
btn-secondary	Secondary outlined button	btn-outline-dark
btn-ghost	Light/subtle button	btn-light
btn-transparent	Fully transparent button	Transparent background
btn-danger	Danger/destructive action button	btn-outline-danger
btn-link	Link-styled button with underline	btn-link
btn-dark	Dark outlined button	btn-outline-dark
btn-loading	Disabled state for loading actions	Primary with disabled state

Preview

Usage

Basic Usage

<button class="btn-cta">Save Changes</button>
<button class="btn-primary">Edit</button>
<button class="btn-secondary">Cancel</button>
<button class="btn-danger">Delete</button>

With Icons

All button classes include btn-icon-spacing which provides proper spacing when using icons alongside text:

<button class="btn-cta">
  <i class="fa fa-save"></i>
  Save
</button>

<button class="btn-danger">
  <i class="fa fa-trash"></i>
  Delete
</button>

Button Class Details

btn-cta

The main call-to-action button. Use for primary actions like "Save", "Submit", or "Create".

• Appearance: Solid primary color background with white text
• Hover: Slightly darker shade

btn-primary

An outlined version of the primary button. Use for secondary emphasis actions.

• Appearance: Primary color outline with primary color text

btn-secondary

A neutral outlined button. Use for less prominent actions.

• Appearance: Dark outline with dark text

btn-ghost

A subtle, light button. Use for tertiary actions or within cards.

• Appearance: Light gray background

btn-transparent

A completely transparent button. Use for icon-only buttons or minimal UI.

• Appearance: No background or border

btn-danger

For destructive actions like delete or remove.

• Appearance: Red outline with red text

btn-link

A button styled as a link with underline.

• Appearance: Link color with underline

btn-loading

Use when an action is in progress. Automatically includes disabled state.

• Appearance: Disabled primary button

Best Practices

1. Use btn-cta for the most important action on a page
2. Use btn-primary for secondary important actions
3. Use btn-secondary for cancel or back actions
4. Use btn-danger only for destructive actions
5. Use btn-ghost or btn-transparent for less prominent actions

Why Custom Classes?

CmAdmin's button classes:

• Ensure consistent sizing with btn-sm applied by default
• Include icon spacing utilities automatically
• Use the application's primary color variables
• Provide a unified look across all admin pages