Link
The Link component is an anchor element that can be used to navigate to different pages or sections within a page. It is styled to look like a standard link.
Import
import { Link } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Link is for navigation to another page, resource, or in-app route, inline in body text, menus, or cards, or as a standalone destination call-to-action.
Do
- Label with specific, action-oriented text that stands alone out of context, such as View order details.
Avoid
- Using vague labels such as Click here or Read more alone.
- Using Link for actions that change state without navigation, such as submitting a form, toggling visibility, or deleting. Use Button.
- Styling a button as a link. Use Link when the control navigates.
- Using a disabled Link. Hide or remove it rather than disabling it.
- Applying link styling, such as underline or link color, to non-interactive text.
Examples
Disabled
The isDisabled prop can be used to disable the link. This will prevent the link from being clickable and will apply a disabled style.
Inline
The inline prop can be used to display the link inline with other elements. This will remove the default block display style.