Iconchild
Use Icon as List.Item icon propList
Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.
Setup
import { List } from '@fragments-sdk/ui';Examples
Bullet List
Default unordered list with bullets
Loading preview...
Numbered List
Ordered list with numbers
Loading preview...
Icon List
List with custom icons per item
Loading preview...
No Style
Plain list without markers
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | List.Item components |
as | enumulol | ul | List type |
variant | enumnonediscdecimalicon | disc | List style variant |
gap | enumnonexssmmdlg | sm | Spacing between items |
style | object | Not set | — |
Usage Guidelines
When to use
- Feature lists with checkmarks or icons
- Ordered steps or instructions
- Navigation lists in sidebars
- Pricing plan feature comparisons
When not to use
- Interactive selection lists (use Menu or Select)
- Data tables with columns (use Table)
- Cards in a grid (use Grid with Card)
- Navigation tabs (use Tabs)
Best practices
- Use as="ol" for sequential or numbered content
- Use variant="icon" with meaningful icons for feature lists
- Keep list items concise and parallel in structure
- Use consistent icons within a single list
Accessibility
- Use semantic list elements (ul, ol) for screen reader support
- List items are automatically announced with count
- Icons are decorative; ensure text conveys meaning
- Avoid deeply nested lists (3+ levels)