AccordionPrimary

Interactive documentation for the primary accordion component. Change props in the playground, inspect color, size, chip, icon, and avatar states.

Preview

Code

<AccordionPrimary
  v-model="open"
  label="Categories"
  icon="lucide:bike"
  :chip-props="chipProps"
>
  <p>Accordion content here</p>
</AccordionPrimary>

Sizes

Available sizes: l, xl, and 2xl.

l

xl

2xl

Colors

Color variants for dark, light, and cocaine backgrounds.

dark

light

cocaine

Content examples

Examples with links, text content, buttons, and range filter.

Links list

Rich content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Range filter

C$ 1,250 – C$ 4,500

Leading content

Examples for icon, avatar image, and avatar initials.

Icon

Accordion content here.

Avatar photo

Accordion content here.

Avatar initials

Accordion content here.

Props & Events

These tables match the current AccordionProps interface and emitted events.

AccordionPrimary props

Input props accepted by the primary accordion component.

Prop	Type	Default	Required	Description
label	string	undefined	Required	Accordion button label.
disabled	boolean	false	Optional	Disables accordion toggle and applies disabled visual state.
color	'dark' \| 'light' \| 'cocaine'	'dark'	Optional	Controls button and panel color variant.
size	'l' \| 'xl' \| '2xl'	'xl'	Optional	Controls button height, text size, icon size, avatar size, and panel spacing.
modelValue	boolean	undefined	Optional	Controls open state through v-model.
icon	string	undefined	Optional	Leading icon name rendered before the label.
leadingIconShape	'square' \| 'rect'	'square'	Optional	Controls leading icon rendering shape.
chipProps	ChipProps	undefined	Optional	Props passed to the trailing Chip component. See Chip
leadingAvatar	string	undefined	Optional	Leading avatar image source. If provided as empty string, icon avatar fallback is shown.
leadingAvatarInitials	string	''	Optional	Initials used by leading avatar fallback.
leadingAvatarChip	boolean	false	Optional	Wraps leading avatar with Chip.

Events

Events emitted by AccordionPrimary.

Event	Payload	Description
update:modelValue	boolean	Emitted when accordion open state changes.