List group
A flexible container for displaying a series of content — plain items, actionable links or buttons, contextual color variants, and flush, numbered, or horizontal layouts.
Import
import { ListGroup, ListGroupItem } from '@metatoy/bootstrap-styled';Basic
ListGroup wraps a list of ListGroupItems (a <ul> / <li> by default). Mark the
current item with active and a non-interactive item with disabled.
Links & buttons
Render items as <a> or <button> with as and add action for the hover / focus /
active affordance. Use as="div" on the group when its items are anchors or buttons.
Contextual variants
variant applies a .list-group-item-<color> background for any of the eight
contextual colors.
Flush, numbered & horizontal
flush removes the outer border and radius (ideal inside a card); numbered adds a
CSS-counter prefix to each item; horizontal lays items in a row (pass a breakpoint like
horizontal="md" to only go horizontal above that width).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| flush | boolean | — | Bootstrap `.list-group-flush` — remove outer border + radius (for cards). |
| numbered | boolean | — | Bootstrap `.list-group-numbered` — CSS-counter numbering on each item. |
| horizontal | boolean | Breakpoint$2 | — | Bootstrap `.list-group-horizontal{-bp}` — lay items in a row (optionally above a breakpoint). |
| as | React.ElementType | — | — |
ListGroupItem accepts active, disabled, action, variant (contextual color),
as, href, plus all native attributes of the element it renders.
Theming
List group reads a dedicated token family, including --bs-list-group-color /
--bs-list-group-bg, --bs-list-group-border-color / --bs-list-group-border-width /
--bs-list-group-border-radius, --bs-list-group-active-bg /
--bs-list-group-active-color / --bs-list-group-active-border-color, the
--bs-list-group-action-* hover/active states, --bs-list-group-disabled-*, and the
--bs-list-group-item-padding-x/-y spacing. Contextual variants derive from the
matching --bs-<color>-*-subtle tokens.
Accessibility
Choose the right element for the job: a static list is a <ul>/<li>; a set of
navigation targets should be anchors (as="a"); a set of in-page controls should be
buttons (as="button"). For actionable items, active marks the current selection —
pair it with aria-current="true" on the active anchor/button, and disabled items are
rendered non-interactive.