Icon
Icons are visual elements that represent actions, objects, or concepts. They provide visual context and help users quickly understand interface elements.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop name | Type IconName | Default value "" | Description Name of the icon to display. See Icon Library for available icons. |
Prop size | Type "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | Default value "md" | Description Size variant of the icon using predefined size tokens |
Prop color | Type string | Default value "currentColor" | Description Color of the icon. Can be a CSS color value (e.g., "red", "#FF0000") or "currentColor" to inherit text color |
Prop state | Type "default" | "success" | "warning" | "danger" | "info" | Default value "default" | Description Visual state variant that applies semantic color styling to the icon |
Prop width | Type number | string | Default value undefined | Description Custom width for the icon (e.g., 24, "24px"). Overrides size when specified. |
Prop height | Type number | string | Default value undefined | Description Custom height for the icon (e.g., 24, "24px"). Overrides size when specified. |
Quick start
import { Icon } from '@clickhouse/click-ui'
function MyIcon() {
return (
<Icon name="check" size="md" />
)
}Related components
- Button: Icons are commonly used within buttons.
- Badge: Icons can be displayed within badges.
- Text: Icons are often paired with text for context.
Common use cases
Icon with Text
Task completed
import { Icon, Text, Container } from '@clickhouse/click-ui'
function IconWithText() {
return (
<Container orientation='horizontal' gap='sm' alignItems='center'>
<Icon name="check" size="sm" state="success" />
<Text>Task completed</Text>
</Container>
)
}Status icon
Success
Warning
Error
import { Icon, Text, Container } from '@clickhouse/click-ui'
function StatusIcon() {
return (
<Container orientation='horizontal' gap='xs' alignItems='center'>
<Icon name="check-in-circle" size="sm" state="success" />
<Text size='sm'>Success</Text>
</Container>
)
}Different sizes
import { Icon, Container } from '@clickhouse/click-ui'
function IconSizes() {
return (
<Container orientation='horizontal' gap='md'>
<Icon name="check" size="xs" />
<Icon name="check" size="sm" />
<Icon name="check" size="md" />
</Container>
)
}