---
name: Addon
menu: Atoms
---

import { Playground, Props } from 'docz';
import Addon, { RawAddon } from './';
import { List, ListItem, ListItemBody } from '../../';
import ArrowRight from '../../entypo/ArrowRight';
import Cog from '../../entypo/Cog';

# Addon
```js
import { Addon } from 'rkta-ui';
```

Addons are meant to be used along with ListItems, to append or prepend to main content

### Composition
Addon ← [Atom](/src-atoms-atom-atom)

### Props
<Props of={RawAddon} />

### Examples
<Playground>
  <List color10>
    <ListItem transparent>
      <Addon>
        <ArrowRight />
      </Addon>
      <ListItemBody>List Item Body</ListItemBody>
      <Addon>
        <Cog />
      </Addon>
    </ListItem>
  </List>
</Playground>