Components
Callout
사용자의 주의를 끄는 짧은 메시지입니다.
You will need admin privileges to install and access this application.
<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 요소를 기반으로 하며 common 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을 사용하여 크기를 제어할 수 있습니다.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
<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을 사용하여 시각적 스타일을 제어할 수 있습니다.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
<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을 사용하여 특정 색상을 지정할 수 있습니다.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
You will need admin privileges to install and access this application.
<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을 사용하여 배경과의 색상 대비를 높일 수 있습니다.
An update to Confy-ui Themes is available. See what's new in version 3.2.0.
An update to Confy-ui Themes is available. See what's new in version 3.2.0.
<Flex direction="column" gap="3">
<Callout.Root color="gray" variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Confy-ui 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 Confy-ui Themes is available. See what's new in version 3.2.0.
</Callout.Text>
</Callout.Root>
</Flex>
As alert
사용자의 즉각적인 주의가 필요한 경우(예: 오류 메시지가 나타날 때) 콜아웃에 네이티브 WAI-ARIA alert 역할을 추가할 수 있습니다. 스크린 리더가 중단되어 새로운 내용을 즉시 알립니다.
Access denied. Please contact the network administrator to view this page.
<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>