assignment_late
Why donate
travel_explore
API Explorer
code
How to contribute
tune
Options & Helpers
style
Style & Identity
view_quilt
Layout and Grid
widgets
Vue Components
Ajax Bar
Avatar
Badge
Banner
Bar
Breadcrumbs
Card
Carousel
Chat Message
Chip
Circular Progress
Color Picker
Dialog
Editor - WYSIWYG
Expansion Item
Floating Action Button
Icon
Img
Infinite Scroll
Inner Loading
Intersection
Knob
Linear Progress
List & List Items
Markup Table
Menu
No SSR
Pagination
Parallax
Popup Edit
Popup Proxy
Pull to refresh
Rating
Responsive
Scroll Area
Separator
Skeleton
Slide Item
Slide Transition
Space
Spinners
Splitter
Stepper
Table
Tabs
Tab Panels
Timeline
Toolbar
Tooltip
Tree
Uploader
Video
Virtual Scroll
swap_calls
Vue Directives
extension
Quasar Plugins
developer_mode
Vue Composables
security
Security
build
Quasar CLI (with Vite)
build
Quasar CLI (with Webpack)
stars
Icon Genie CLI
healing
Quasar Utils
note_add
App Extensions
Avatar
The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape. By default it is circular, but it can also be square or have a border-radius applied to give rounded corners to the square shape.
It is often used with other components in their slots.
Loading QAvatar API...
Usage
TIP
The size property will determine the height and the width of the Avatar. The font-size property will set the size of the font used within the Avatar, which will have an effect on the size of letters and icons.
Basic
Standard sizes
Square
Rounded
With other components
Overlapping avatars
Ready for more?
Caught a mistake?Edit this page in browser
1. Introduction
2. QAvatar API
3. Usage
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu