Callout

Display a short message near the content that it describes.

A callout block gives information about nearby content. It can have a title, a semantic tone, and an icon. It cannot contain other blocks.

Use a tone to give meaning to the message. The renderer controls the color and other visual details for each tone.

API

callout(text: string): CalloutBuilder

Method	Input	Result
`setTitle`	`string`	Adds a title above the message.
`setTone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	Sets the semantic tone.
`setIcon`	`string`	Sets an icon name for the renderer to resolve.

The text value is required. All other properties are optional. If you do not set an optional property, the SDK does not include it in the protocol output.

Basic callout

Use a basic callout for information that does not need a title or a special tone.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('This order has already shipped.')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "This order has already shipped."
        }
      ]
    }
  }
}

Title

Add a title when a reader must identify the subject before they read the message.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('This order has already shipped.').setTitle(
    'Shipment status'
  )
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "This order has already shipped.",
          "title": "Shipment status"
        }
      ]
    }
  }
}

Tones

Neutral

Use neutral for general information that does not need emphasis. You can also omit the tone to use the renderer’s neutral default.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout(
    'The carrier updates tracking once each hour.'
  ).setTone('neutral')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "The carrier updates tracking once each hour.",
          "tone": "neutral"
        }
      ]
    }
  }
}

Info

Use info for useful context that does not report success, risk, or failure.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('Tracking can take one hour to appear.').setTone(
    'info'
  )
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "Tracking can take one hour to appear.",
          "tone": "info"
        }
      ]
    }
  }
}

Success

Use success when an operation or state has the intended result.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('Payment is complete.').setTone('success')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "Payment is complete.",
          "tone": "success"
        }
      ]
    }
  }
}

Warning

Use warning for a risk or a state that needs attention.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout(
    'This order will ship without insurance.'
  ).setTone('warning')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "This order will ship without insurance.",
          "tone": "warning"
        }
      ]
    }
  }
}

Danger

Use danger for a failure, a destructive state, or an action with severe effects.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('Payment failed.').setTone('danger')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "Payment failed.",
          "tone": "danger"
        }
      ]
    }
  }
}

Icon

Set an icon name that the renderer can resolve. The protocol contains the name, not an image or a glyph.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('This order has already shipped.').setIcon(
    'truck'
  )
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "This order has already shipped.",
          "icon": "truck"
        }
      ]
    }
  }
}

All options

You can set the title, tone, and icon on the same callout.

import { callout, defineResource } from '@backlit/sdk'

const orders = defineResource('orders', [])

orders.view('detail', () =>
  callout('This order has already shipped.')
    .setTitle('Shipped')
    .setTone('warning')
    .setIcon('truck')
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "detail",
    "slots": {
      "content": [
        {
          "kind": "callout",
          "text": "This order has already shipped.",
          "title": "Shipped",
          "tone": "warning",
          "icon": "truck"
        }
      ]
    }
  }
}