# Silke list item

## Basic usage

```js
<SilkeListItem label="Item 1" />
```

## With icon

```js
<SilkeListItem label="Item 1" icon="widget" />
```

## With tag

```js
<SilkeListItem
  label="Item 1"
  icon="widget"
  tag={{ label: 'Tag', size: 'tiny', kind: 'secondary' }}
/>
```

## With subLabel

```js
<SilkeBox column gap="xxs">
  <SilkeListItem label="Item 1" subLabel="Sub label" />
  <SilkeListItem label="Item 1" subLabel={<SilkeText>Sub label</SilkeText>} />
  <SilkeListItem
    label="Item 1"
    subLabel="Sub label"
    icon="widget"
    tag={{ label: 'Tag', size: 'tiny', kind: 'secondary' }}
  />
</SilkeBox>
```

## With items

```js
<SilkeListItem label="Item 1" items={[{ label: 'Item 1.1' }, { label: 'Item 1.2' }]} />
```

## With link

```js
<SilkeListItem label="Item 1" link="https://www.google.com" />
```

## With active indicator

```js
const [activeIndex, setActiveIndex] = React.useState(0);

<SilkeBox column gap="xxs">
  <SilkeListItem label="Item 1" active={activeIndex === 0} onClick={() => setActiveIndex(0)} />
  <SilkeListItem label="Item 2" active={activeIndex === 1} onClick={() => setActiveIndex(1)} />
  <SilkeListItem label="Item 3" active={activeIndex === 2} onClick={() => setActiveIndex(2)} />
</SilkeBox>;
```

## With children

```js
<SilkeListItem label="Item 1" children={<SilkeText>Children</SilkeText>} />
```

## With super long label

```js
<div style={{ width: 200 }}>
  <SilkeListItem
    label="Item 1"
    icon="widget"
    items={[{ label: 'Item 1.1' }, { label: 'Item 1.2' }]}
    label="lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  />
</div>
```
