List item

List items are part of Lists.

Basic usage

• Kappa
• 4Head
• PogChamp
• FrankerZ

import { ListItem } from '@streamelements/frontend-ui';

<ListItem>Kappa</ListItem>

Density

The density variant changes the spacing inside the component.

• I'm default
• I'm compact
• I'm comfortable

import { ListItem } from '@streamelements/frontend-ui';

<ListItem density="default">I'm default</ListItem>
<ListItem density="compact">I'm compact</ListItem>
<ListItem density="comfortable">I'm comfortable</ListItem>

Roundness

The roundness variant changes the roundness of the corners

• I'm round
• I'm square

import { ListItem } from '@streamelements/frontend-ui';

<ListItem roundness="round">I'm round</ListItem>
<ListItem roundness="square">I'm square</ListItem>

Selected state

• Kappa

import { ListItem } from '@streamelements/frontend-ui';

<ListItem state="selected">Kappa</ListItem>

Hover state

• I'm selected, Hover me :)
• I'm idle, Hover me :)

Variants

Variant name	Values
state	'selected' | 'disabled'
density	'default' | 'compact' | 'comfortable'
roundness	'square' | 'round'

Props

In addition to the general Stitches props like css and as the following props are available:

Property	Value	Default	Description
state	state variant	undefined	Sets styles according to the passed state. If you attach any logic to it, like onClick, you still need to handle the case of state === 'disabled' in the onClick handler.
clickable	boolean	undefined	Sets cursor: pointer CSS rule to the element.
density	density variant	'default'	Sets different amount of inner padding to the element.
roundness	roundness variant	'round'	Removes the corner radius when "square"