Color Schemes for List are not implemented in the default theme. You can extend the theme to implement them.
List
List is used to display list items. It renders a <ul> element by default.
Import#
import {List,ListItem,ListIcon,OrderedList,UnorderedList,} from '@chakra-ui/react'
Unordered List#
Ordered List#
Unstyled List with icon#
Add icons to the list items by using the ListIcon component. You can pass the
name of the icon or use custom icons. The size of the icon is relative to the
font size of the list item.
Props#
List Props#
colorScheme
colorSchemeDescription
Type
stringsize
sizeDescription
Sizes for List are not implemented in the default theme. You can extend the theme to implement them.
Type
stringspacing
spacingDescription
The space between each list item
Type
SystemProps["margin"]stylePosition
stylePositionDescription
Shorthand prop for listStylePosition
Type
SystemProps["listStylePosition"]styleType
styleTypeDescription
Shorthand prop for listStyleType
Type
SystemProps["listStyleType"]variant
variantDescription
Variants for List are not implemented in the default theme. You can extend the theme to implement them.
Type
stringList Item Props#
ListItem composes Box so you can pass all style
and pseudo style props.
TODO