---
name: Status
menu: Atoms
route: /atoms/Status
---

import Status from './Status';
import { Playground, Props } from 'docz';
import TestingIcon from '../icons/Testing';

# Status

This component renders an HTML `<Status>` and passes along all props.

## API
<Props of={Status} />

## Base
<Playground>
  <Status color="#0573F7" status="Definición" />
</Playground>

## Progress bar phase
<Playground>
  <Status progressbar color="#0573F7" status="Definición" />
</Playground>

## Without icon
<Playground>
  <Status color="red" number="10" status="Ejemplo" />
</Playground>

## Custom icon
<Playground>
  <Status
    color="green"
    customIcon={<TestingIcon color="green" />}
    status="Custom icon"
  />
</Playground>

## Custom icon has higher hierarchy than status
<Playground>
  <Status
    color="green"
    customIcon={<TestingIcon color="green" />}
    status="Definición"
  />
</Playground>