Callout

A note inside the content. Its body can hold paragraphs, code and links.

Import

ts
import { Callout } from '@k8ordo/ui';

Usage

Information

Note

Values stay in the DOM, so typing never re-renders.

tsx
<Callout label="Note" tone="info">
  <p>Values stay in the DOM, so typing never re-renders.</p>
</Callout>

Statuses

Success

Supported

Works in every core browser.

Information

Note

The browser checks the input before it is sent.

Warning

Pitfall

A controlled field is not restored by a form reset.

Error

Deprecated

This option goes away in the next major.

tsx
<Callout label="Supported" tone="success">…</Callout>
<Callout label="Note" tone="info">…</Callout>
<Callout label="Pitfall" tone="warning">…</Callout>
<Callout label="Deprecated" tone="error">…</Callout>

Code and links in the body

The body is children, so it can hold several paragraphs, Code and Anchor. Leave out label and only the icon and the body remain.

Warning

Pitfall

Passing value makes the field controlled, and a form reset no longer restores it.

Pass defaultValue instead. See the input reference.

Information

This article reflects the API as of July 2023.

tsx
<Callout label="Pitfall" tone="warning">
  <p>
    Passing <Code>value</Code> makes the field controlled, and a form
    reset no longer restores it.
  </p>
  <p>
    Pass <Code>defaultValue</Code> instead. See{' '}
    <Anchor href="https://react.dev/reference/react-dom/components/input">
      the input reference
    </Anchor>
    .
  </p>
</Callout>

<Callout tone="info">
  <p>This article reflects the API as of July 2023.</p>
</Callout>

Callout or Alert

Alert reports the result of an action or the state of the application, and a screen reader announces it when it appears. For a note in an article or a guide, use Callout. It has role="note", so it is not announced when the page loads or a client navigation brings it in.

Props

children
Type: ReactNode
Default: -
tone
Type: Status
Default: -
label?
Type: string
Default: -

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n

Components