# Callout

Shows an inline message tied to nearby content.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Callout.tsx)

## Overview

A callout is an inline message tinted by intent, for guidance tied to nearby content.

Use `Banner` instead for system or page-wide messages.

## Examples

### Basic

```tsx
import { Callout } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Callout>
      <Callout.Icon />
      <Callout.Content>Changes may take a few minutes to appear.</Callout.Content>
    </Callout>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Callout/Basic.tsx)

### Intent

Set `intent` to `info`, `positive`, `warning`, or `negative`. It defaults to `info`. Add one `Callout.Action` at most.

```tsx
import { Callout, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['info', 'positive', 'warning', 'negative'] as const).map((intent) => (
        <Callout intent={intent} key={intent}>
          <Callout.Icon />
          <Callout.Content>You need to deposit $25.00 to continue.</Callout.Content>
          <Callout.Action nativeButton={false} render={<a href="#intent" />}>
            Add funds
          </Callout.Action>
        </Callout>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    display: 'flex',
    flexDirection: 'column',
    gap: '3',
    maxWidth: '36rem !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Callout/Intent.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Callout, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Callout key={size} size={size}>
          <Callout.Icon />
          <Callout.Content>Size {size}</Callout.Content>
          <Callout.Action>Learn more</Callout.Action>
        </Callout>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    display: 'flex',
    flexDirection: 'column',
    gap: '3',
    maxWidth: '36rem !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Callout/Size.tsx)

### Shape

Set `shape="pill"` for a fully rounded, centered callout. It defaults to `default`.

```tsx
import { Callout } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Callout intent="positive" shape="pill">
      <Callout.Icon />
      <Callout.Content>Converted</Callout.Content>
    </Callout>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Callout/Shape.tsx)

## Guidelines

TODO: Write guidelines for Callout.