Usage
import { Link } from "lambda-ui-components";
export default function App() {
return (
<Link href="#" color="primary">
Click me
</Link>
);
}Link
Link component allows users to navigate to another page or resource.
Playground
Experiment with all the properties of the Link component in real time.
Properties
href
The URL the link points to.
label
The text content of the link.
icon
Adds an icon to the link.
color
Color scheme of the link.
type
Visual appearance of the link.
variant
Style variant when type is 'button'.
iconPosition
Position of the icon relative to the label.
justify
Horizontal alignment when type is 'button'.
size
Size of the link.
radius
Border radius when type is 'button'.
loading
Disables the link and shows a loading state. Works only when type is 'button'.
disabled
Disables the link.
API Reference
Props
Prop | Default | Type |
|---|---|---|
href | undefined | string |
type | "default" | "default" | "button" |
label | undefined | string |
icon | undefined | ReactNode |
disabled | false | boolean |
variant | "solid" | "classic" | "solid" | "outline" | "dashed" | "soft" | "subtle" | "text" | "unstyled" |
color | "primary" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "small" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
iconPosition | "left" | "left" | "right" |
justify | "center" | "start" | "center" | "end" |