Logo
Logos are visual elements that represent our customers and partner companies. They support different sizes, themes (light/dark), and can be customized with specific dimensions.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop name | Type LogoName | Default value - | Description The name of the logo to display |
Prop theme | Type "light" | "dark" | Default value 'light' | Description The theme variant of the logo (light or dark) |
Prop size | Type "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | Default value 'md' | Description The size of the logo |
Prop width | Type number | string | Default value undefined | Description Custom width for the logo (overrides size) |
Prop height | Type number | string | Default value undefined | Description Custom height for the logo (overrides size) |
Quick Start
import { Logo } from '@clickhouse/click-ui'
function MyLogo() {
return (
<Logo
name="clickhouse"
size="md"
/>
)
}Related Components
Common Use Cases
Partner Logos
import { Logo, Container } from '@clickhouse/click-ui'
function PartnerLogos() {
return (
<Container orientation='horizontal' gap='lg' wrap='wrap'>
<Logo name="airbyte" size="lg" />
<Logo name="aws" size="lg" />
<Logo name="google" size="lg" />
</Container>
)
}Different Sizes
import { Logo, Container } from '@clickhouse/click-ui'
function LogoSizes() {
return (
<Container orientation='horizontal' gap='md'>
<Logo name="clickhouse" size="xs" />
<Logo name="clickhouse" size="sm" />
<Logo name="clickhouse" size="md" />
</Container>
)
}Custom Dimensions
import { Logo, Container } from '@clickhouse/click-ui'
function CustomLogo() {
return (
<Container orientation='horizontal' gap='md'>
<Logo name="clickhouse" width={100} height={40} />
<Logo name="clickhouse" width="150px" height="60px" />
</Container>
)
}