Skip to content
Reference

Components

Every component the system documents, live, with the props its page specifies. Toggle dark mode in the header to check both themes.

Button

QBtn triggers an action. Every app uses three variants and nothing else.

Variants

With icon

Loading and disabled

Status roles

Filled role buttons follow the Role fills rule: positive and info fill with Role text, warning takes Navy text.

On a Dark surface

Tag and Badge

A Tag is a small pill label that marks a section or category; a Badge shows a number.

Tags

Design systems
Vue
Accessibility

Tags on Dark

Design systems
Vue
Accessibility

Selectable

Design
Engineering
Writing

Badges

Open projects
12
Failed jobs
99+

Card

A Card groups one piece of content on a white panel with a Line border.

Static

Service

Design system audit

A review of your current UI against the tokens and components.

Link

Data table pattern

Members table

Search, filter, sort and select, all on one card-sized link.

Inset

Tip

Inset cards recede on a white page. Use them for side notes, never for the main content.

Media and actions

Logistics

Ops dashboard

Input and Select

QInput takes typed text. QSelect picks from a list. Both share the same field styling and label rules.

Text

With hint

Error

Disabled

Password

Select

Multi-select

Textarea

Form

A form validates on the client, shows errors next to the field, and reports the server result.

Invite a member

Table

QTable for tabular data: flat, bordered, Caption headers, Soft row hover.

Members

Loading
Empty
Invite member
NameEmailRoleStatusActions
Aiden Clarkaiden@acme.comViewer
Active
Ana Ruizana@acme.comAdmin
Active
Ben Okaforben@acme.comEditor
Active
Bianca Neribianca@acme.comAdmin
Invited
Carlos Vegacarlos@acme.comEditor
Active
Chloe Martinchloe@acme.comViewer
Active
Dana Wolfedana@acme.comViewer
Active
Dev Pateldev@acme.comAdmin
Invited
Elena Rossielena@acme.comEditor
Active
Farid Haddadfarid@acme.comViewer
Active
Grace Kimgrace@acme.comAdmin
Active
Hugo Silvahugo@acme.comEditor
Invited
Ines Costaines@acme.comViewer
Active
Jonas Bergjonas@acme.comAdmin
Active
Kara Nwosukara@acme.comEditor
Active
Liam Walshliam@acme.comViewer
Invited
Maya Cohenmaya@acme.comAdmin
Active
Noah Fischernoah@acme.comEditor
Active
Olivia Brownolivia@acme.comViewer
Active
Pablo Ortizpablo@acme.comAdmin
Invited
Quinn Taylorquinn@acme.comEditor
Active
Rosa Limarosa@acme.comViewer
Active
Sam Leesam@acme.comAdmin
Active
Tara Singhtara@acme.comEditor
Invited
Uma Raouma@acme.comViewer
Active
Records per page:
1–25 of 30

Sticky header

NameRoleJoined
Aiden ClarkViewerSep 27, 2026
Rosa LimaViewerSep 18, 2026
Ines CostaViewerSep 9, 2026
Zoe AdamsEditorAug 26, 2026
Quinn TaylorEditorAug 17, 2026
Hugo SilvaEditorAug 8, 2026
Yara HaddadAdminJul 25, 2026
Pablo OrtizAdminJul 16, 2026
Grace KimAdminJul 7, 2026
Xavi PuigViewerJun 24, 2026
Olivia BrownViewerJun 15, 2026
Farid HaddadViewerJun 6, 2026
Wen LiEditorMay 23, 2026
Noah FischerEditorMay 14, 2026
Elena RossiEditorMay 5, 2026
Victor HugoAdminApr 22, 2026
Maya CohenAdminApr 13, 2026
Dev PatelAdminApr 4, 2026
Uma RaoViewerMar 21, 2026
Liam WalshViewerMar 12, 2026
Chloe MartinViewerMar 3, 2026
Dana WolfeViewerMar 3, 2026
Tara SinghEditorFeb 20, 2026
Kara NwosuEditorFeb 11, 2026
Ben OkaforEditorFeb 2, 2026
Records per page:
1–25 of 30

Dialog

QDialog with a QCard inside, for confirmations and short forms that block the page.

Destructive confirm

Plugin confirm

Form dialog

Full screen on phones

Notify

Quasar's Notify plugin for short, non-blocking feedback after an action.

Types

Positive offers Undo. Negative stays until dismissed.

Tabs

QTabs, QTab and QTabPanels switch between views of the same object without leaving the page.

Default

Acme website: 12 pages, 3 members, last published Oct 20, 2026.

Dense, in a card

Created Oct 1, 2026 by Ana Ruiz.

With icons

3 unread messages.

List

QList and QItem for stacked rows: navigation, settings, contact lists, search results.

Bordered, with icons and captions

Email
ana@acme.com
Phone
+1 555 0100
Office
Austin, TX

Clickable, with active item

Dense, with separators

Created
Oct 1, 2026
Owner
Ana Ruiz
Visibility
Team
Storage
1.2 GB

Expansion items

Type and color

Quick reference. Every value below is read from the rendered CSS, so it shows what ships in this theme.

Headings

.text-h1 ·
Look like one product
.text-h2 ·
Look like one product
.text-h3 ·
Look like one product
.text-h4 ·
Look like one product
.text-h5 ·
Look like one product
.text-h6 ·
Look like one product

Text roles

Lead · .csa-lead

Tokens, Quasar components and patterns for every Nuxt app.

Body

Body text is 16px with a 1.65 line height in the Text color.

Small · .text-body2

Small text for helper copy, footnotes and dense tables.

Caption · .csa-caption
Updated Oct 22, 2026
Tag · .csa-tag
Case study

Surfaces and Role text

Page
positive warning info negative
Soft
positive warning info negative
Dark
positive warning info negative

Brand and role fills

primary
secondary
accent
positive
warning
info
negative