---
name: Bage
menu: Atoms
---

import { Playground, Props } from 'docz';
import Bage, { RawBage } from './';

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

Bage is a preconfigured sheet of paper, which can be used in different ways.
Unlike it's done in Material UI R•K•T•A Bages are not opinionated about their positions.

### Composition

Bage ←
[Paper](/src-atoms-paper-paper) ←
[Font](/src-atoms-paper-paper) ←
[Atom](/src-atoms-atom-atom)

### Props

<Props of={RawBage} />

### Basic example

<Playground>
  <Bage primary>A bage</Bage>
  <Bage secondary color="paper">
    A bage
  </Bage>
  <Bage success>A bage</Bage>
</Playground>

### Fitting bages together

<Playground>
  <Bage primary fitRight hardRight>
    A bage
  </Bage>
  <Bage color12 fitAll hard>
    A bage
  </Bage>
  <Bage warning fitLeft hardLeft>
    A bage
  </Bage>
</Playground>