Foundations

Buttons

KitFront starter kits include filled buttons, outline buttons, link buttons, and size modifiers. Choose the tab that matches your starter.

Button colors

Bootstrap button colors are controlled by CSS variables in assets/css/core.css.

Color	Token	Default	Preview
Primary	`--kf-btn-primary-bg`	`#ff2056`	#ff2056
Primary Hover	`--kf-btn-primary-bg-hover`	`#e61c4d`	#e61c4d
Secondary	`--kf-btn-secondary-bg`	`#fe9a00`	#fe9a00
Secondary Hover	`--kf-btn-secondary-bg-hover`	`#e58b00`	#e58b00
Light	`--kf-btn-light-bg`	`#f8f9fa`	#f8f9fa
Light Hover	`--kf-btn-light-bg-hover`	`#f3f4f6`	#f3f4f6
Dark	`--kf-btn-dark-bg`	`#111827`	#111827
Dark Hover	`--kf-btn-dark-bg-hover`	`#1f2937`	#1f2937

Base and sizes

Button base styles and size modifiers are defined in assets/css/core.css.

Type	Class	Size / Utilities
Base	`.btn`	`min-width: 148px; height: 48px; padding: 12px 24px; border-radius: 12px; gap: 10px;`
Small	`.btn.btn-sm`	`min-width: 120px; height: 40px; padding: 8px 20px;`
Large	`.btn.btn-lg`	`min-width: 172px; height: 56px; padding: 16px 28px;`
Block	`.btn.btn-block`	`min-width: 100%; width: 100%;`

Small Default Large Block Button

<a href="#" class="btn btn-primary btn-sm">Small</a>
<a href="#" class="btn btn-primary">Default</a>
<a href="#" class="btn btn-primary btn-lg">Large</a>
<a href="#" class="btn btn-primary btn-block">Block Button</a>

Filled buttons

Use .btn with a filled variant class.

Primary Secondary Light Dark White

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-white">White</a>

Outline buttons

Outline buttons use transparent backgrounds until hover or active state.

Primary Outline Secondary Outline Light Outline Dark Outline White Outline

<a href="#" class="btn btn-primary-outline">Primary Outline</a>
<a href="#" class="btn btn-secondary-outline">Secondary Outline</a>
<a href="#" class="btn btn-light-outline">Light Outline</a>
<a href="#" class="btn btn-dark-outline">Dark Outline</a>
<a href="#" class="btn btn-white-outline">White Outline</a>

Link buttons

Use link buttons when the action should feel lighter than a regular button.

Default Link Primary Link Secondary Link Dark Link Light Link White Link

<a href="#" class="btn btn-link">Learn More</a>
<a href="#" class="btn btn-link btn-link-primary">Primary Link</a>
<a href="#" class="btn btn-link btn-link-secondary">Secondary Link</a>
<a href="#" class="btn btn-link btn-link-dark">Dark Link</a>
<a href="#" class="btn btn-link btn-link-light">Light Link</a>
<a href="#" class="btn btn-link btn-link-white">White Link</a>

Arrow link buttons

Add .btn-link-arrow with any link button color class.

Default Arrow Primary Arrow Secondary Arrow Dark Arrow Light Arrow White Arrow

<a href="#" class="btn btn-link btn-link-arrow">Learn More</a>
<a href="#" class="btn btn-link btn-link-primary btn-link-arrow">Primary Link</a>
<a href="#" class="btn btn-link btn-link-secondary btn-link-arrow">Secondary Link</a>
<a href="#" class="btn btn-link btn-link-dark btn-link-arrow">Dark Link</a>
<a href="#" class="btn btn-link btn-link-light btn-link-arrow">Light Link</a>
<a href="#" class="btn btn-link btn-link-white btn-link-arrow">White Link</a>

Customize buttons

Update the button tokens and class rules in assets/css/core.css. All button classes using those values will follow your changes.