Lists are continuous, vertical indexes of text or images

Basic

A basic list of items with title and subtitle.

Header

A vs-list-header separator with custom color.

Icon

The list items and the headers can have a icon as well.

TIP Vuesax uses the > Google Material Icons font library by default. For a list of all available icons, visit the official > Material Icons page . Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

Content

You can add custom content to the item. It will be pushed to the right side.

Avatar

You can implement an avatar in the list with the slot="avatar" by putting a [vs-avatar] component (/components/avatar.html)
SJ Matt X

API

Name Type Parameters Description default
color String RGB, HEX, primary, success, danger, warning, dark Component color primary
icon String Material icons An icon to show
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
title String List primary text
subtitle String List secondary text
slot=”avatar” Slot Slot to add the avatar in the list