Quick Links - Launchpad

Mixed contextual colors

home Home check_circle Completed pending Pending Approval error Errors info Info receipt_long Tax & Compliance analytics Business Analytics & Insights verified Verified

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-primary">
        <span class="material-symbols-outlined">home</span> Home
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-success">
        <span class="material-symbols-outlined">check_circle</span> Completed
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-warning">
        <span class="material-symbols-outlined">pending</span> Pending Approval
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-danger">
        <span class="material-symbols-outlined">error</span> Errors
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-info">
        <span class="material-symbols-outlined">info</span> Info
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-secondary">
        <span class="material-symbols-outlined">receipt_long</span> Tax &amp; Compliance
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-primary">
        <span class="material-symbols-outlined">analytics</span> Business Analytics &amp; Insights
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-success">
        <span class="material-symbols-outlined">verified</span> Verified
    </a>
</div>

Solid hover

home Home check_circle Completed pending Pending Approval error Errors info Info receipt_long Tax & Compliance analytics Business Analytics

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm lp-chip--primary">
        <span class="material-symbols-outlined">home</span> Home
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--success">
        <span class="material-symbols-outlined">check_circle</span> Completed
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--warning">
        <span class="material-symbols-outlined">pending</span> Pending Approval
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--danger">
        <span class="material-symbols-outlined">error</span> Errors
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--info">
        <span class="material-symbols-outlined">info</span> Info
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--secondary">
        <span class="material-symbols-outlined">receipt_long</span> Tax &amp; Compliance
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--primary">
        <span class="material-symbols-outlined">analytics</span> Business Analytics
    </a>
</div>

Outline hover

home Home check_circle Completed pending Pending Approval error Errors info Info receipt_long Tax & Compliance analytics Business Analytics

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-primary">
        <span class="material-symbols-outlined">home</span> Home
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-success">
        <span class="material-symbols-outlined">check_circle</span> Completed
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-warning">
        <span class="material-symbols-outlined">pending</span> Pending Approval
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-danger">
        <span class="material-symbols-outlined">error</span> Errors
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-info">
        <span class="material-symbols-outlined">info</span> Info
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-secondary">
        <span class="material-symbols-outlined">receipt_long</span> Tax &amp; Compliance
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--outline-primary">
        <span class="material-symbols-outlined">analytics</span> Business Analytics
    </a>
</div>

Default

home Home analytics Business Analytics & Insights group HR settings Account Preferences & Settings mail Mail event Q4 Planning inventory_2 Warehouse & Inventory Management receipt_long Tax

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">home</span> Home
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">analytics</span> Business Analytics &amp; Insights
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">group</span> HR
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">settings</span> Account Preferences &amp; Settings
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">mail</span> Mail
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">event</span> Q4 Planning
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">inventory_2</span> Warehouse &amp; Inventory Management
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">receipt_long</span> Tax
    </a>
</div>

Many links (toggle auto-appears)

dashboard Dashboard analytics Business Analytics & Insights group HR settings Account Preferences & Settings mail Mail calendar_month Calendar folder Project Files & Documents shopping_cart Orders payments Billing bar_chart Sales Performance Reports inventory_2 Warehouse & Inventory Management local_shipping Shipping support_agent Customer Support Portal security Security build DevOps code API cloud Cloud Infrastructure receipt_long Tax & Compliance

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">dashboard</span> Dashboard
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">analytics</span> Business Analytics &amp; Insights
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">group</span> HR
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">settings</span> Account Preferences &amp; Settings
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">mail</span> Mail
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">calendar_month</span> Calendar
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">folder</span> Project Files &amp; Documents
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">shopping_cart</span> Orders
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">payments</span> Billing
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">bar_chart</span> Sales Performance Reports
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">inventory_2</span> Warehouse &amp; Inventory Management
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">local_shipping</span> Shipping
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">support_agent</span> Customer Support Portal
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">security</span> Security
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">build</span> DevOps
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">code</span> API
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">cloud</span> Cloud Infrastructure
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm">
        <span class="material-symbols-outlined">receipt_long</span> Tax &amp; Compliance
    </a>
</div>

Few links (no toggle needed)

check_circle Completed task_alt Approved verified Verified

<div class="lp-quick-links">
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-success">
        <span class="material-symbols-outlined">check_circle</span> Completed
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-success">
        <span class="material-symbols-outlined">task_alt</span> Approved
    </a>
    <span class="lp-quick-links-sep"></span>
    <a href="#" class="lp-chip lp-chip--sm lp-chip--soft-success">
        <span class="material-symbols-outlined">verified</span> Verified
    </a>
</div>