---
title: Quick Link Button - Outline One Line
order: 51
---
# Quick Link Button - Outline One Line
A compact button-style quick link with outline border and single-line title display. This variant is optimized for space-efficient layouts where visual prominence is needed with minimal vertical space usage.
## Overview
The outline one-line button provides professional button styling with strict single-line text truncation. It's ideal for dense layouts, toolbars, or navigation areas where space efficiency is critical while maintaining the polished appearance of outlined buttons.
## Features
- **Outline Styling**: Professional border with transparent background
- **Single-Line Title**: Text truncation with ellipsis for consistent height
- **Compact Height**: Minimal vertical space usage (48px)
- **Icon Integration**: Support for both image and SVG icons
- **Hover Effects**: Interactive feedback with background color change
- **Touch Optimized**: Appropriate touch targets despite compact size
## Structure
The component consists of:
1. **Link Container**: `.hoo-qllink` - Link wrapper element
2. **Button Container**: `.hoo-qlbtn.oneline` - Main button with single-line constraint
3. **Icon Area**: `.hoo-ql-media` - Icon display (optional)
4. **Info Area**: `.hoo-qlinfo` - Text content container
5. **Title**: `.hoo-qltitle` - Single-line title with ellipsis
## Data Structure
```json
{
"quick-link": {
"href": "/employee-directory",
"title": "Employee Directory Search",
"qlimg": {
"src": "/icons/directory.svg",
"alt": "Directory icon"
}
}
}
```
### With SVG Icon
```json
{
"quick-link": {
"href": "/time-tracking",
"title": "Time Tracking System",
"qlsvg": {
"iconName": "clock",
"size": "20"
}
}
}
```
## CSS Classes
- `.hoo-qllink`: Link wrapper element
- `.hoo-qlbtn`: Main button container
- `.hoo-qlbtn.oneline`: Single-line text constraint modifier
- `.hoo-ql-media`: Icon container (20px for compact layout)
- `.hoo-qlinfo`: Text information container
- `.hoo-qltitle`: Title text with ellipsis overflow
## Styling
### Visual Design
- **Border**: 1px solid `#d1d1d1` with 4px border radius
- **Background**: Transparent with light hover state
- **Padding**: 12px vertical, 16px horizontal
- **Height**: Fixed 48px height for consistency
- **Text Overflow**: Ellipsis truncation for long titles
### Layout
- **Direction**: Horizontal layout (icon beside text)
- **Alignment**: Items vertically centered
- **Gap**: 8px between icon and text
- **Text Constraint**: Single line with `white-space: nowrap`
### Interactive States
- **Default**: Outlined border with transparent background
- **Hover**: Light background (`#f3f2f1`) with smooth transition
- **Focus**: Blue focus ring for keyboard accessibility
- **Active**: Pressed state with subtle background change
## Use Cases
### Toolbar Actions
```handlebars
```
### Sidebar Navigation
```handlebars
```
## Typography
- **Font Size**: 14px
- **Line Height**: 20px (1lh for single line)
- **Font Weight**: 600 (semi-bold)
- **Text Overflow**: `ellipsis` with `overflow: hidden`
- **White Space**: `nowrap` to prevent wrapping
## Text Truncation
### Content Guidelines
- Design for titles that may be truncated
- Test with long titles to ensure meaningful truncation
- Use descriptive first words in titles
- Consider tooltip support for full title display
## Content Guidelines
### Title Text
- **Front-load Important Words**: Put key terms at the beginning
- **Be Descriptive**: Ensure truncated text still provides meaning
- **Test Truncation**: Verify titles work when cut off
- **Consistent Length**: Aim for similar title lengths in groups
### Icon Selection
- **Smaller Icons**: Use 20px icons for compact layout
- **Clear Recognition**: Ensure icons are recognizable at smaller size
- **Consistent Style**: Maintain visual consistency across toolbar
- **Meaningful Alt Text**: Provide descriptive alt text
## Accessibility
- **Keyboard Navigation**: Full keyboard navigation support
- **Focus Indicators**: Clear focus states for keyboard users
- **Screen Reader Support**: Proper semantic structure
- **Touch Targets**: Maintains 44px minimum touch target width
- **Truncation Support**: Consider tooltips for full title access
- **Color Contrast**: Meets WCAG AA standards
## Performance
- **Efficient Layout**: Simple horizontal layout with minimal reflows
- **CSS-Only Truncation**: No JavaScript required for text truncation
- **Lightweight**: Minimal CSS footprint
- **Scalable**: Efficient rendering in large lists
## When to Use One-Line Variant
### Choose One-Line When:
- **Space Constraints**: Vertical space is limited
- **Toolbar Context**: Part of action bars or toolbars
- **Dense Lists**: Need to fit many options in limited space
- **Consistent Height**: Visual alignment is important
### Choose Multi-Line When:
- **Descriptive Content**: Need additional context or descriptions
- **Reading Comprehension**: Full titles are important for understanding
- **Accessibility**: Users need complete information visible
## Browser Support
- **Modern Browsers**: Full support in Chrome, Firefox, Safari, Edge
- **CSS Text Overflow**: Excellent support for ellipsis truncation
- **Flexbox Layout**: Native support for horizontal alignment
- **Touch Devices**: Optimized for touch interaction
## SCSS Import
## Integration Examples
### Toolbar Integration
```handlebars