Link API
Demos
For examples and details on the usage of this React component, visit the component demo pages:
Import
import Link from '@mui/joy/Link';
// or
import { Link } from '@mui/joy';
Component name
The nameJoyLink
can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
children | node | The content of the component. | |
color | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | string | 'primary' | The color of the link. To learn how to add your own colors, check out Themed components—Extend colors. |
disabled | bool | false | If true , the component is disabled. |
endDecorator | node | Element placed after the children. | |
level | 'body1' | 'body2' | 'body3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | string | 'body1' | Applies the theme typography styles. |
overlay | bool | false | If true , the ::after psuedo element is added to cover the area of interaction. The parent of the overlay Link should have relative CSS position. |
startDecorator | node | Element placed before the children. | |
sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
textColor | any | The system color. | |
underline | 'always' | 'hover' | 'none' | 'hover' | Controls when the link should have an underline. |
variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | 'plain' | Applies the theme link styles. To learn how to add your own variants, check out Themed components—Extend variants. |
The
ref
is forwarded to the root element.Slots
Name | Default class | Default HTML tag | Description |
---|---|---|---|
root | .MuiLink-root | 'a' | The component that renders the root. To learn how to customize the slot, check out the Overriding component structure guide. |
startDecorator | .MuiLink-startDecorator | 'span' | The component that renders the start decorator. To learn how to customize the slot, check out the Overriding component structure guide. |
endDecorator | .MuiLink-endDecorator | 'span' | The component that renders the end decorator. To learn how to customize the slot, check out the Overriding component structure guide. |