Mini Footer

Mini Footer

Mini Footer is a compact footer component for modals, embedded content, and views where full footer is too large.

Visual Specifications

Property	Value
Height	56-64px
Padding	16-20px horizontal
Background	White or light grey
Border	1px top border
Button Gap	12px between buttons
Font Size	14-16px (buttons)

Layout Variants

Single Action Dual Action With Links Centered

Primary button right-aligned or centered

Primary and secondary buttons

Buttons with small help/legal links

All elements centered in container

Button Arrangements

Left	Right	Usage
-	Primary	Simple confirm modal
Secondary	Primary	Confirm/Cancel dialog
-	Primary + Secondary	Stacked on mobile
Links	Primary	Action with reference

Alignment Options

Alignment	Usage
Left	Form-related actions
Center	Modal dialogs
Right	Standard confirmation
Justified	Buttons span full width

Content Elements

Element	Style	Purpose
Primary Button	Filled, brand color	Main action
Secondary Button	Outline	Alternative action
Text Links	Small, underline	Legal/Help
Divider	Small line	Visual separation

Usage Guidance

When to use

• Modal dialogs
• Confirmation popups
• Embedded content
• Form submissions
• Slide-over panels

Best practices

✅ Do	❌ Don’t
Clear action hierarchy	Confusing button order
Descriptive button text	Generic “OK” buttons
Left-align secondary, right primary	Non-standard alignment
Include cancel option	Forced actions only
Proper spacing	Cramped layout

Button Guidelines

Context	Primary	Secondary
Confirm	”Confirm”, “Save"	"Cancel”
Delete	”Delete” (red)	“Cancel”
Create	”Create"	"Back”
Acknowledge	”Got It”, “Accept”	-

Responsive Behavior

Screen	Behavior
Desktop	Side-by-side buttons
Tablet	Side-by-side or stacked
Mobile	Stacked, full-width