Skip to content

@agala-labs/ui

List Group

Displays scan-friendly related records or actions.

Examples

Default

Activations: 0

Default queue
8
In progress
12
Completed
24
Needs review
3
Failed
2
Custom badge slot
Custom
Custom trailing slot
Details
Disabled queue
1
<AgalaListGroup><AgalaListGroupItem label="Invoices" subtitle="12 open" icon="document" /></AgalaListGroup>

Import

import { AgalaListGroup, AgalaListGroupItem } from '@agala-labs/ui'

API

PropTypeDefaultDescription
variant'divided' | 'cards''divided'Group presentation.
gapstringCustom gap.
borderless / dividersbooleanBorder controls.
labelstringRequired item label.
subtitlestringItem supporting copy.
icon / actionIconstringAgala icon names.
badgestring | numberTrailing count/status.
badgeVariant'default' | 'primary' | 'success' | 'warning' | 'danger''default'Built-in badge semantic treatment.
disabledbooleanfalseDisables an item.

Slots

  • ListGroup: default
  • ListGroupItem: leading, default, trailing, badge

Accessibility

Choose semantic content inside each item and label action icons.

Released under the MIT License.