@n8d/htwoo-patterns/_patterns/molecules/quick-links/ql-list-button-no-outline-center.md

hTWOo Patterns to setup custom style guide

---
title: Quick Link Button - No Outline Center
order: 32
---

# Quick Link Button No Outline - Center Aligned

The Center Aligned No Outline Button provides a clean, minimal quick link with centered text alignment and no border styling. This variant offers maximum visual simplicity while maintaining clear interactivity and professional appearance.

## Overview

The Center Aligned No Outline Button represents the most minimal approach to button-style quick links. By removing border elements and centering the content, it creates a clean, uncluttered interface perfect for modern layouts requiring subtle navigation elements.

## Features

### Minimal Design
- **No Borders**: Clean appearance without outline or border elements
- **Center Alignment**: Icon and text centered within button area
- **Subtle Background**: Minimal background treatment for clean aesthetics
- **Clean Typography**: Centered text with optimal readability

### Layout Characteristics
- **Symmetric Design**: Balanced content distribution
- **Grid Friendly**: Consistent alignment within grid layouts
- **Flexible Sizing**: Adapts to content while maintaining center alignment
- **Visual Balance**: Even spacing around centered content

### Interactive Features
- **Hover States**: Subtle background changes on interaction
- **Focus Indicators**: Clear keyboard focus without border reliance
- **Touch Optimization**: Appropriate touch targets despite minimal styling
- **Smooth Transitions**: Gentle animations for state changes

## Structure

The component consists of:
1. **Container**: `.hoo-qlbutton.hoo-qlbutton-no-outline.hoo-qlbutton-center` - Main button container
2. **Icon Area**: `.hoo-ql-media` - Centered icon display
3. **Text Container**: `.hoo-qlinfo` - Centered text wrapper
4. **Title**: `.hoo-qltitle` - Primary link text

## Design Principles

### Visual Hierarchy
- **Content Focus**: Emphasis on content rather than container
- **Subtle Presence**: Minimal visual weight while maintaining functionality
- **Balanced Layout**: Even distribution of visual elements
- **Clean Aesthetics**: Modern, uncluttered appearance

### Spacing and Alignment
- **Center Justified**: All content centered within button bounds
- **Consistent Margins**: Even spacing around content elements
- **Optical Balance**: Visual weight distributed evenly
- **Grid Harmony**: Aligned with grid systems and layout structures

## Use Cases

- **Modern Dashboards**: Clean, contemporary interface designs
- **Minimal Layouts**: Interfaces prioritizing simplicity and clarity
- **Grid Systems**: Uniform appearance within organized grids
- **Content Focused**: Designs where content takes precedence over chrome
- **Professional Interfaces**: Business applications requiring subtle navigation

## Styling Features

### Background Treatment
- **Transparent Base**: Minimal background interference
- **Hover Enhancement**: Subtle background on interaction
- **Theme Respect**: Integrates with overall theme colors
- **Focus Clarity**: Clear focus states without border dependence

### Typography Treatment
- **Center Alignment**: Text centered within available space
- **Optimal Sizing**: Font size optimized for centered display
- **Clean Hierarchy**: Clear text hierarchy without visual distractions
- **Readable Contrast**: Sufficient contrast for accessibility

## Accessibility

- **Keyboard Navigation**: Full keyboard support and clear focus states
- **Screen Reader Friendly**: Proper semantic structure and labels
- **Color Independence**: Functionality not dependent on color alone
- **Touch Accessibility**: Appropriate touch targets despite minimal styling
- **High Contrast Support**: Functions well in high contrast modes

## Theme Integration

- **Color Harmony**: Respects theme color schemes
- **Consistent States**: Theme-appropriate hover and focus states
- **Brand Alignment**: Supports brand color integration
- **Mode Support**: Functions across light, dark, and high contrast themes

## Responsive Behavior

- **Container Adaptation**: Responds to parent container constraints
- **Touch Optimization**: Maintains usability across device types
- **Text Scaling**: Responsive typography for different screen sizes
- **Layout Stability**: Consistent center alignment across breakpoints

## Performance

- **Efficient Rendering**: Minimal CSS for optimal performance
- **Smooth Interactions**: Hardware-accelerated hover effects
- **Layout Stability**: Prevents reflow during state changes
- **Resource Efficiency**: Lightweight implementation

## SCSS Import