Quasar Components | Quasar Framework

Buttons

Inputs

Loading

Media

Navigation

Panels & Popups

Scroll

Tables

Other Components

Directives

Plugins

Utils

A loading bar for ajax calls in progress

A space for your portrait, icon or text

To highlight small but important info

To display important messages and actions

A small top bar for side info and actions

To keep track of your position inside app

To access the most important actions

Buttons Dropdown

To access more actions at once in less space

An alternative to classic buttons

To display grouped contents

To display images and other contents

To display users' conversations

To flag one or more options in a list

A small container for info and actions

Circular Progress

To inform when content is still loading

To select color values and codes

To access the most important actions

To show actions and info only when needed

To write text and style it directly

Expansion Panels

To show hidden extra info and actions

To access and choose a file from users' device

Floating Action Button

To display the page primary action

A system to submit validated inputs

Wrapper for your own custom form elements

To insert icons inside other components

To set some basic image features

Infinite Scroll

To enable new content display while scrolling

To add content loading inside a component

Input Text Fields

To collect users' typed text input

Set how UI elements enter the screen

To set a value with a draggable gauge

Linear Progress

A loading bar with various behaviors

List and List Items

To display contents on a vertical list

To display data and content on a table

A dropdown panel to access options

Ignore irrelevant code during SSR generation

Observer resize

Emit an Event when an element resizes

Observer scroll

Emit an Event when the user scrolls

Helper component to set groups of options

To navigate content on multiple pages

To create interesting UI image background

To access inline editing of data

To show extra content on click

Pull to Refresh

To refresh the page content with a gesture

To select a single option in a list

To pick a period on a range of values

The classic "star rating" component

To keep content aspect ratio consistent

To set a scrollable content in components

To choose one item from a dropdown list

The linear visual divider for contents

To set loading content placeholders

To add dragging feature to list items

To pick a single value on a range

Slide Transition

To show a hidden content

Fill space inside elements using flexbox

A loading indicator with various behaviors

To add a draggable resizer for containers

To divide content in progressive steps

To display much data on a datatable

To split out content view in the same page

To navigate separate content in one page

A vertical solution to set milestones in time

To set a specific time on the clock

An alternative to pick an option among many

To switch an option on and off

The top main bar for actions and menu

To show extra useful info about the UI

An indented structure for hierarchical data

To upload any kind of file from the computer

To embed and display a video player in UI

To render new content while scrolling it

Handle elements coming into the view

Material Ripples

Apply Material ripples to elements

Watch changes being made to the DOM tree

Morph DOM elements between two states

Handle page scroll

Take action when element comes into view

Handle touch & mouse hold user actions

Handle touch & mouse panning user actions

Handle repeated touch & mouse taps/clicks

Handle touch & mouse swipe user actions

Addressbar Color

Manage the browser addressbar color

Handle app fullscreen mode

For app coming into (or out of) view

Quick way to offer a list of actions

Easy way to manage browser cookies

Manage dark mode

Plugin to display a floating modal

Overlay for a background action in progress

Display a loading bar for in progress Ajax calls

Local/Session Storage

Manage the local storage and session storage

Helps with SEO by managing the meta tags

Display floating animated messages

Easily handle date objects

Various DOM-related helper utils

Morph DOM elements helper util

Formatter utils

Various text formatting utils

Scrolling utils

Various scrolling-related utils

Type checking utils

Helpers to determine variable types

Global event bus

Various other utils that Quasar supplies