Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Callout

Callout is a data display component for rendering highlighted message blocks.

​
Import

import { Callout } from 'radix-native-ui';

​
Usage

import { Callout } from 'radix-native-ui';

<Callout.Root>
  <Callout.Icon>
    <Icon name="info" />
  </Callout.Icon>
  <Callout.Text>
    This is an important message.
  </Callout.Text>
</Callout.Root>

​
Props

​
Callout.Root

​
Callout.Icon

​
Callout.Text

​
Examples

​
Basic Callout

<Callout.Root>
  <Callout.Text>
    This is an important message.
  </Callout.Text>
</Callout.Root>

​
With Color

<Callout.Root color="blue">
  <Callout.Text>
    This is an informational message.
  </Callout.Text>
</Callout.Root>

<Callout.Root color="red">
  <Callout.Text>
    This is an error message.
  </Callout.Text>
</Callout.Root>

<Callout.Root color="green">
  <Callout.Text>
    This is a success message.
  </Callout.Text>
</Callout.Root>

​
Variants

<Callout.Root variant="soft">
  <Callout.Text>Soft callout</Callout.Text>
</Callout.Root>
<Callout.Root variant="outline">
  <Callout.Text>Outline callout</Callout.Text>
</Callout.Root>
<Callout.Root variant="surface">
  <Callout.Text>Surface callout</Callout.Text>
</Callout.Root>

​
With Icon

<Callout.Root color="amber">
  <Callout.Icon>
    <WarningIcon />
  </Callout.Icon>
  <Callout.Text>
    Warning: This action cannot be undone.
  </Callout.Text>
</Callout.Root>

​
Sizes

<Callout.Root size={1}>
  <Callout.Text>Small callout</Callout.Text>
</Callout.Root>
<Callout.Root size={2}>
  <Callout.Text>Medium callout (default)</Callout.Text>
</Callout.Root>
<Callout.Root size={3}>
  <Callout.Text>Large callout</Callout.Text>
</Callout.Root>

​
Form Error

<Callout.Root color="red" variant="outline">
  <Callout.Icon>
    <ErrorIcon />
  </Callout.Icon>
  <Flex direction="column">
    <Callout.Text weight="medium">Form Errors</Callout.Text>
    <Callout.Text>Please fix the following issues:</Callout.Text>
    <Callout.Text>- Email is required</Callout.Text>
    <Callout.Text>- Password must be at least 8 characters</Callout.Text>
  </Flex>
</Callout.Root>
  • Card - Card component
  • Badge - Badge component