Components
List
Vertical lists of text, icons, avatars and actions.
List shows a column of items. ListItemButton makes a row pressable. ListItemText, ListItemIcon and ListItemAvatar fill a row, and ListSubheader titles a group.
import List from '@hone-ui/react/List';
import ListItem from '@hone-ui/react/ListItem';
import ListItemButton from '@hone-ui/react/ListItemButton';
import ListItemText from '@hone-ui/react/ListItemText';
import ListItemIcon from '@hone-ui/react/ListItemIcon';
import ListItemAvatar from '@hone-ui/react/ListItemAvatar';
import ListSubheader from '@hone-ui/react/ListSubheader';Examples
- AAdaOnline
<List subheader={<ListSubheader>Mail</ListSubheader>} sx={{ width: 280 }}>
<ListItem disablePadding>
<ListItemButton selected>
<ListItemText primary="Inbox" secondary="3 new" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Drafts" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>A</Avatar>
</ListItemAvatar>
<ListItemText primary="Ada" secondary="Online" />
</ListItem>
</List>Props
| Component | Props |
|---|---|
List | dense (false), disablePadding (false), subheader, component ('ul') |
ListItem | alignItems ('center'), dense, disableGutters, disablePadding, divider, secondaryAction, component ('li') |
ListItemButton | selected, dense, disableGutters, divider, alignItems, autoFocus, disabled, href, onClick(event) |
ListItemText | primary, secondary, inset, disableTypography, slotProps.primary, slotProps.secondary |
ListItemIcon | children: an icon |
ListItemAvatar | children: an Avatar |
ListSubheader | color ('default', 'primary', 'inherit'), disableGutters, disableSticky, inset, component ('li') |
Every part takes sx, className, style, ref and the HTML props of its element.
Notes
- All parts except ListItemButton are Server Components and ignore theme
defaultProps. - ListItemText
slotProps.primaryandslotProps.secondarytake Typography props, such ascomponent,variantandcolor. denseon List tightens every item through CSS.- ListItem's
buttonprop andListItemSecondaryActionare not supported. Use ListItemButton andsecondaryAction.
Accessibility
List renders ul and li elements. ListItemButton is a button, or an a with href. A
selected link row gets aria-current="page".