Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Project resources
  • Recommendations
  • Usage boundaries
  • API reference

Data

List

Composes a named native list with separate record content and trailing actions.

idle

Usage

import { List, ListContent, ListItem } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<List>
	<ListItem>
		<ListContent />
	</ListItem>
</List>

Examples

Project resources

Recommendations

GuidancePractice
Do

Give the list a name and keep record content separate from trailing actions.

Usage boundaries

GuidanceBoundary
Scope

Use Table for comparisons across columns. Avoid putting independent buttons inside a record-wide link.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
ListListProps<ul>Named unordered list with system-owned semantics and presentation.
ListItemListItemProps<li>Native list item; it does not make the whole row interactive.
ListContentListContentProps<div>Content region for the primary label and supporting information.
ListActionsListActionsProps<div>Separate region for trailing links or controls.
PreviousData TableNextMetric

  • Design system

    Updated 10 October 2026 · Maya Chen

  • Documentation

    Updated 9 October 2026 · Alex Rivera

A semantic list keeps each resource and its action distinct.

  • Action controls

    Button and toolbar patterns for common tasks.

    Patterns

  • Site navigation

    Menus and side navigation for moving through an app.

    Patterns

  • Budget table

    Search, sort, and compare budget records.

    Data