Version:

Install ​

shell
npm i @mate-react/callout

Import ​

tsx
import { MateCallout } from '@mate-react/callout';

Variants ​

Neutral with custom icon ​

tsx
<MateCallout titleText="Heading text" iconName="home">
  Every possible content like text or an unordered list
</MateCallout>

Secondary ​

tsx
<MateCallout theme="secondary" titleText="Heading text">
  Every possible content like text or an unordered list
</MateCallout>

Info ​

tsx
<MateCallout theme="info" titleText="Heading text">
  Every possible content like text or an unordered list
</MateCallout>

Success ​

tsx
<MateCallout theme="success" titleText="Heading text">
  Every possible content like text or an unordered list
</MateCallout>

Warning ​

tsx
<MateCallout theme="warning" titleText="Heading text">
  Every possible content like text or an unordered list
</MateCallout>

Error ​

tsx
<MateCallout theme="danger" titleText="Heading text">
  Every possible content like text or an unordered list
</MateCallout>

No heading ​

tsx
<MateCallout theme="danger">
  Every possible content like text or an unordered list
</MateCallout>