콜아웃

콜아웃 (Callout)

사용자의 주의를 끌기 위한 짧은 메시지를 표시하는 컴포넌트예요. 아이콘, 텍스트, 색상으로 구성돼요.

출처: 문서

본문

사용자의 주의를 끌기 위한 짧은 메시지를 표시해요.

<Callout.Root>
  <Callout.Icon>
    <InfoCircledIcon />
  </Callout.Icon>

  <Callout.Text>
    You will need admin privileges to install and access this application.
  </Callout.Text>
</Callout.Root>

API Reference

Root

Icon과 Text 부분을 묶어요. 이 컴포넌트는 div 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<"1" | "2" | "3"> "2"
variant "soft" | "surface" | "outline" "soft"
color enum No default value
highContrast boolean No default value

Icon

콜아웃과 연결된 아이콘의 너비와 높이를 제공해요. 이 컴포넌트는 div 요소를 기반으로 해요.

Text

콜아웃 텍스트를 렌더링해요. 이 컴포넌트는 p 요소를 기반으로 해요.

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex direction="column" gap="3" align="start">
  <Callout.Root size="1">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="2">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="3">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

Variant

variant prop으로 시각적 스타일을 제어해요.

<Flex direction="column" gap="3">
  <Callout.Root variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="surface">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="outline">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex direction="column" gap="3">
  <Callout.Root color="blue">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="green">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="red">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

High-contrast

HighContrast prop으로 추가 대비를 더해요.

<Flex direction="column" gap="3">
  <Callout.Root color="gray" variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      An update to Radix Themes is available. See what's new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="gray" variant="soft" highContrast>
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      An update to Radix Themes is available. See what's new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>
</Flex>

As alert

사용자의 즉각적인 주의가 필요할 때(예: 오류 메시지가 나타날 때) 콜아웃에 네이티브 WAI-ARIA alert role을 추가해요. 그러면 화면 리더가 방해를 받아 새 콘텐츠를 즉시 알려 줘요.

<Callout.Root color="red" role="alert">
  <Callout.Icon>
    <ExclamationTriangleIcon />
  </Callout.Icon>

  <Callout.Text>
    Access denied. Please contact the network administrator to view this page.
  </Callout.Text>
</Callout.Root>

더 알아보기 (Learn more)