---
name: Atom
menu: Atoms
---

import { Playground, Props } from 'docz';
import Atom, { RawAtom } from './';

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

Everything in the UI is built of atoms.

### Props

<Props of={RawAtom} />

### Examples

<Playground>
  <Atom>By default Atom is rendered as div element</Atom>
</Playground>

<Playground>
  <Atom element="button">But we can tell it to be any element we want to with `element` prop</Atom>
</Playground>

<Playground>
  <Atom css={{ fontStyle: 'italic' }}>
    We can style atoms with `css` object and get classnames attached automatically
  </Atom>
  <Atom style={{ textDecoration: 'underline' }}>or with `style` object to get inline styles</Atom>
</Playground>