React Callout Component

Callout

React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.

Available in Other JavaScript Frameworks

CoreUI React Callout Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Default callout

Callouts accommodate text of any length, along with optional elements like icons and headings. <CCallout> on its own is a neutral callout — a bordered surface with a thicker leading edge, inheriting the text color of its surroundings.

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutDefaultExample = () => {
  return (
    <CCallout>
      New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
      terminology, guidelines, and code snippets.
    </CCallout>
  )
}

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutDefaultExample = () => {
  return (
    <CCallout>
      New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
      terminology, guidelines, and code snippets.
    </CCallout>
  )
}

Variants

theme sets the color context. It colors the leading edge and tints the border, and it renders a .theme-* class — so a theme class on any element above the callout colors it just the same.

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutExample = () => {
  return (
    <>
      <CCallout theme="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="secondary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="warning">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="info">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="inverse">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
    </>
  )
}

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutExample = () => {
  return (
    <>
      <CCallout theme="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="secondary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="warning">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="info">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout theme="inverse">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
    </>
  )
}

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Please ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Tinted callout

Because the theme class exposes every slot, the background utilities read from it too. Add .theme-subtle for a filled callout without naming a color twice.

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutSubtleExample = () => {
  return (
    <>
      <CCallout className="theme-subtle" theme="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout className="theme-subtle" theme="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout className="theme-subtle" theme="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
    </>
  )
}

import React from 'react'
import { CCallout } from '@coreui/react'

export const CalloutSubtleExample = () => {
  return (
    <>
      <CCallout className="theme-subtle" theme="primary">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout className="theme-subtle" theme="success">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
      <CCallout className="theme-subtle" theme="danger">
        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
        terminology, guidelines, and code snippets.
      </CCallout>
    </>
  )
}

Deprecated props

Deprecated in v6.0.0

color still works and is removed in v7. It renders the same .theme-{color} class as theme, and loses to theme when both are set.

- <CCallout theme="success">Saved</CCallout>
+ <CCallout theme="success">Saved</CCallout>

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CCallout />