---
name: CallOut
menu: UI Kit
---

import { Playground, PropsTable } from 'docz'
import CallOut from './CallOut'
import HorizontalGutter from '../HorizontalGutter'

# CallOut

## Basic Use
<Playground>
  <HorizontalGutter>
    <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
    <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
    <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
    <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
  </HorizontalGutter>
</Playground>


