React Design System: component Callout

Callout

Callouts visually highlight important content for the user.

Visually important content

The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div/> element.

Overview

API

Code

Component 'Callout'

First, you need to import a component to your code (сheck component path is right):

import Callout from "../../core/Callout";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

dense

boolean = false

This prop set the dense shape of the component. The default state is false.

view

string = filled

This prop set the view of the component. Possible states: filled | flat | smooth | outlined | raised . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

title

string

String content of optional title element.

icon

string

Name of a Blueprint UI icon to render on the left side.

  
  < Callout
      type = 'def'
      view = 'smooth'
      color = 'primary' 
      title = 'Visually important content'
      icon = {< Icon icon='info-sign' iconSize={24} />}
  > 
      The component is a simple wrapper around the CSS API that provides props
      for modifiers and optional title element. Any additional HTML props will
      be spread to the rendered < Code > {" < div >"} < /Code> element.
  < / Callout >