---
title: Quick Link Button - Fill Center
order: 35
---

# Quick Link Button - Filled Center

A prominent button-style quick link with filled background, centered content, and multi-line title support. This variant provides maximum visual impact while allowing for more descriptive content.

## Overview

The filled center button offers the highest visual prominence in the quick link family, combining theme-colored backgrounds with centered layouts and flexible text display. It's perfect for primary actions and featured content.

## Features

- **Filled Background**: Theme-colored background with white text
- **Centered Layout**: Vertical stacking of icon and text content  
- **Multi-line Support**: Up to 2 lines for title with optional description
- **Visual Prominence**: Highest contrast and visual weight
- **Icon Integration**: Centered icon display above text
- **Hover Effects**: Interactive feedback with enhanced contrast

## Key Differences from One-Line Variant

- **Text Lines**: Supports 2-line titles vs single line
- **Description**: Optional description field available
- **Height**: Taller to accommodate additional content
- **Use Case**: More descriptive content vs compact actions

## CSS Classes

- `.hoo-qlbtn`: Main button container
- `.filled`: Filled background modifier
- `.center`: Centered layout modifier
- `.hoo-qltitle`: Title text (2-line clamp)
- `.hoo-qldesc`: Description text (2-line clamp)

## Use Cases

- **Primary Actions**: Main call-to-action buttons
- **Featured Content**: Highlighted applications or sections
- **Dashboard Cards**: Prominent dashboard elements
- **Hero Buttons**: Primary navigation in hero sections

## SCSS Import