---
name: Callout
menu: Components
route: /components/callout
---

import { Playground, Props } from 'docz'
import Callout from './'
import Text from '../text/'

# Callout

## Basic usage

<Playground>
    <Callout>
        <Text as="p">Basic callout. No title, icon, or other props.</Text>
    </Callout>
    <br />
    <Callout title="With title">
        <Text as="p">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </Text>
    </Callout>
    <br />
    <Callout icon="calendar">
        <Text as="p">With icon!</Text>
    </Callout>
    <br />
    <Callout icon="calendar" title="With icon and title">
        <Text as="p">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </Text>
    </Callout>
</Playground>

## Intent

<Playground>
    <Callout intent="success">
        <Text as="p">With intent. Note default icon for this intent.</Text>
    </Callout>
    <br />
    <Callout title="With intent and title" intent="warning">
        <Text as="p">Note default icon for this intent.</Text>
    </Callout>
    <br />
    <Callout icon={false} intent="warning">
        <Text as="p">
            With intent but icon=false. Lorem ipsum dolor sit amet, consectetur
            adipisicing tempor incididunt ut labore et dolore magna aliqua.
        </Text>
    </Callout>
    <br />
    <Callout icon="code" intent="danger">
        <Text as="p">With intent and custom icon, overriding intent's default icon.</Text>
    </Callout>
</Playground>


## Icon Size

<Playground>
    <Callout
        title="I am a banana"
        intent="danger"
        icon="crosshair"
        iconSize="8rem"
    >
        <Text as="p">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
    </Callout>
</Playground>


## PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| intent | string | no | "default" | `["default", "success", "warning", "danger"]` or custom defined in theme |
| icon | string or bool | no | | name of icon. overrides intent's default icon. |
| iconSize | string | no | `2.4rem` | |
| title | string | no | | |
| `STYLED` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    pt,
    pb,
    pl,
    pr
  },
  colors: {
    borderColor
  },
  radii: {
    borderRadius
  },
  shadows: {
    boxShadow
  },
  borders: {
    border
  },
  intents: {
    colors: {
      default
      success
      warning
      danger
    }
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/callout)
- [Learn more about themeing](/blaster-theme)