NavLink
A navigation link component with leftSection, rightSection, and optional description sub-text. Renders as an <a> when href is provided, otherwise as a <button>.
Default
<NavLink href="#" label="Home" />
<NavLink href="#" label="Settings" active />
<NavLink href="#" label="Users" />With icons
<NavLink href="#" label="Home" leftSection={<HomeIcon />} />
<NavLink href="#" label="Settings" leftSection={<SettingsIcon />} active />
<NavLink href="#" label="Users" leftSection={<UsersIcon />} />Description
<NavLink
href="#"
label="Home"
description="Return to the dashboard"
leftSection={<HomeIcon />}
/>
<NavLink
href="#"
label="Settings"
description="Manage your preferences"
leftSection={<SettingsIcon />}
active
/>Variants
<NavLink label="Link" variant="subtle" /> {/* default */}
<NavLink label="Link" variant="light" active />
<NavLink label="Link" variant="filled" active />Right section & badge
<NavLink
href="#"
label="Inbox"
leftSection={<InboxIcon />}
rightSection={<Badge size="xs">12</Badge>}
/>
<NavLink href="#" label="Disabled link" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | children | — | Primary text label |
description | children | — | Secondary text below the label |
leftSection | children | — | Icon or content before the label |
rightSection | children | — | Icon or content after the label |
href | string | — | URL — renders an <a> when set |
active | boolean | — | Applies active styling |
disabled | boolean | — | Prevents interaction |
variant | 'filled'|'light'|'subtle' | 'subtle' | Active color variant |
color | UiColor | — | Accent color for active state |
component | string | — | Root element override |