Icon List

A vertical grouping of related items consisting of an icon, text label, and value.

Component checklist

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { IconList, IconName } from '@optimus-web/core';
                                                        
                                                        <IconList
                                                            items=[
                                                                {
                                                                    key: 'firstItem',
                                                                    icon: IconName.Time,
                                                                    label: 'Fist item label',
                                                                    description: 'First item description',
                                                                    variant: 'primary',
                                                                },
                                                                {
                                                                    key: 'secondItem',
                                                                    icon: IconName.ActionLog,
                                                                    label: 'Second item label',
                                                                    description: 'Second item description',
                                                                    variant: 'basic',
                                                                },
                                                            ],
                                                        />
                                                        
                                                            

API

Name

Description

Type

Default

compact?

Determines whether the IconList should be displayed in a compact mode

boolean?

false

items?

An array of items to be rendered in the IconList

IconListItemProps[]

 

small?

Determines whether the IconList should be displayed in a small size

boolean?

false