Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Colors#
Links support multiple color options.
Colors
With Underline#
Enable underline for clearer link indication.
Underline
In Text Context#
In Paragraph
Navigation Links#
Navigation
Footer Links#
Footer Style
External Links#
External Links
Breadcrumb Links#
Breadcrumbs
Link with Icon#
With Icons
Card with Link#
Card Footer
Inline Actions#
Inline Actions
Usage#
Import
import { Link } from "@sugarcoat/ui-nxt";Usage
<Link href="/about" color="primary" underline>
About Us
</Link>
// External link
<Link
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
External Site ↗
</Link>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | - | URL the link points to |
| color | "default" | "primary" | "accent" | "success" | "danger" | "default" | Color of the link |
| underline | boolean | false | Whether to show underline decoration |
| target | string | - | Where to open the linked URL (e.g., '_blank') |
| rel | string | - | Relationship between current and linked document |
| children | ReactNode | - | Link text content |
Accessibility#
- Uses native
<a>element for full accessibility support - Proper focus styles for keyboard navigation
- When using
target="_blank", always includerel="noopener noreferrer" - Link text should be descriptive (avoid "click here")
- Color alone should not be the only way to identify links - consider using underline
- External link indicators help users understand link behavior