Link
Link provides consistent styling for hyperlinks and navigation elements. It supports different sizes, weights, and can include icons for better visual context.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop size | Type TextSize | Default value "md" | Description Font size of the link text |
Prop weight | Type TextWeight | Default value "normal" | Description Font weight of the link text |
Prop icon | Type IconName | Default value undefined | Description Icon name to display alongside the link text |
Prop component | Type ElementType | Default value "a" | Description HTML element type to render (e.g., "a", "button", or custom component) |
Prop onClick | Type ReactEventHandler | Default value undefined | Description Callback function called when the link is clicked |
Quick Start
import { Link } from '@clickhouse/click-ui'
function MyLink() {
return (
<Link href="https://clickhouse.com">
Visit ClickHouse
</Link>
)
}Related Components
- Button: For primary actions, whereas Link is for navigation.
- Text: Links can be styled similarly to text components.
Common Use Cases
Navigation Link
import { Link, Container } from '@clickhouse/click-ui'
function NavigationLinks() {
return (
<Container orientation='horizontal' gap='md'>
<Link href='/dashboard'>Dashboard</Link>
<Link href='/settings'>Settings</Link>
<Link href='/profile'>Profile</Link>
</Container>
)
}External Link
import { Link } from '@clickhouse/click-ui'
function ExternalLink() {
return (
<Link href='https://clickhouse.com' icon='external-link' target='_blank'>
Visit ClickHouse Website
</Link>
)
}Inline Link
Learn more about our documentation or contact support.
import { Link, Text } from '@clickhouse/click-ui'
function InlineLink() {
return (
<Text>
Learn more about{' '}
<Link href='/docs'>our documentation</Link>
{' '}or{' '}
<Link href='/support'>contact support</Link>
.
</Text>
)
}