ListGroup

The ListGroup component displays a collection of related items in a structured list. It supports active states, contextual tones, disabled items, links, numbered lists, flush styling, and responsive horizontal layouts.

Import

import { ListGroup } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Active items

Use the active prop to highlight an item.

Disabled items

Use the disabled prop to disable interaction.

Tones

Use the tone prop to apply contextual colors.

Flush

Remove outer borders with the flush prop.

Numbered List

Use the numbered prop to render ordered list items.

Horizontal layout

Use the horizontal prop to display items horizontally.

Link items

Use as="a" and to to create navigation items.

Button items

Use as="button" for interactive items.

Complete example

Utility props

All utility props provided by Prime are supported.

API

ListGroup

Prop	Type	Default	Description
children	ReactNode	—	List group content.
as	"ul" | "div"	"ul"	Element type used to render the list group.
className	string | object	—	Additional CSS classes.
style	object	—	Inline styles.
flush	boolean	false	Removes outer borders.
numbered	boolean	false	Displays items with numbering.
horizontal	boolean | "sm" | "md" | "lg" | "xl" | "xxl"	false	Displays items horizontally.

ListGroup.Item

Prop	Type	Default	Description
children	ReactNode	—	Item content.
as	"li" | "a" | "button"	"li"	Element type used to render the item.
className	string | object	—	Additional CSS classes.
style	object	—	Inline styles.
to	string	"#"	Navigation target.
tone	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"	—	Visual tone.
active	boolean	false	Marks the item as active.
disabled	boolean	false	Disables interaction.