Link
Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.
Import
import { Link } from '@trendmicro/react-styled-ui';
Usage
Default
EDITABLE EXAMPLE
<Link
href="https://github.com/trendmicro-frontend"
>
Trend Micro Frontend
</Link>
Underlined link
EDITABLE EXAMPLE
<Link
href="https://github.com/trendmicro-frontend"
textDecoration="underline"
>
Trend Micro Frontend
</Link>
Link with icon
EDITABLE EXAMPLE
<Stack shouldWrapChildren direction="column" spacing=".5rem">
<Link
href="https://github.com/trendmicro-frontend"
>
<Icon icon="t-ball"/>
<Space width="2x" />
Trend Micro Frontend
</Link>
<Link
href="https://github.com/trendmicro-frontend"
textDecoration="underline"
>
<Icon icon="t-ball"/>
<Space width="2x" />
Trend Micro Frontend
</Link>
</Stack>
Link with disabled attribute
EDITABLE EXAMPLE
<Stack shouldWrapChildren direction="column" spacing=".5rem">
<Link
href="https://github.com/trendmicro-frontend"
disabled
>
Trend Micro Frontend
</Link>
<Link
href="https://github.com/trendmicro-frontend"
textDecoration="underline"
disabled
>
Trend Micro Frontend
</Link>
</Stack>
Link to another page
EDITABLE EXAMPLE
<Link
href="https://github.com/trendmicro-frontend"
target="_blank"
rel="noopener noreferrer"
>
Trend Micro Frontend
</Link>
You can also create an ExternalLink component for enhanced usability.
EDITABLE EXAMPLE
const ExternalLink = React.forwardRef((props, ref) => (
<Link
ref={ref}
target="_blank"
rel="noopener noreferrer"
{...props}
/>
));
render(
<ExternalLink href="https://github.com/trendmicro-frontend/tonic-ui">
Open link in new window
<Space width="2x" />
<Icon icon="external-link"/>
</ExternalLink>
);
Props
| Name | Type | Default | Description |
|---|
| disabled | boolean | | If true, the link will be disabled. This sets aria-disabled=true and you can style this state by using the _disabled prop. |
| onClick | function | | A callback called when the link is clicked. |
