Back to Schema Browser

ButtonList

Container for multiple Button child components with layout controls

Required Props: idSupports Children: Button

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

PropertyTypeDescriptionExamples
flexDirectionstring
Layout direction
Default: "flex-row"
flex-col
alignItemsstring
Vertical alignment
Default: "items-center"
items-start
justifyContentstring
Horizontal alignment
Default: "justify-start"
justify-center
gapstring
Space between buttons
Default: "gap-2"
gap-4
sourcestring
Optional data source key for dynamic button lists
-
buttonsarray
Inline button definitions when not using child Button nodes
Default: []
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
-
-
classNamestring
Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.
flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold
rootobject
-
-

Examples

Hero CTA Buttons

A responsive button list for hero sections with primary and secondary actions

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex gap-[var(--container-gap)] flex-col w-full justify-center items-center text-lg md:flex-row"
}

Horizontal Button Group

A horizontal group of buttons with consistent spacing and alignment

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-row gap-4 items-center justify-center w-full md:justify-start"
}

Vertical Button Stack

A vertical stack of buttons, perfect for mobile-first designs

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-col gap-space-xs items-stretch justify-center w-full md:flex-row md:items-center"
}

Navigation Button Group

A compact button group for navigation or toolbar actions

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-row gap-2 items-center justify-between w-full md:justify-end md:gap-4"
}