Link
The Link component ensures consistent styling of text links across applications.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
While text links navigate users between pages or sections, the Link component is used to control the colour and style of text links in content. Icons can also be included to maintain the same consistent styling as the text. It comes with 2 colour variants, default (dark) and inverse (light).
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Link } from "@iag/chroma-react-ui.components";
When to use
Use links to navigate users between pages, sections or external resources. Use the Link component where text links are used in content to control their visual appearance. It's suitable for use in text, in lists, or stand-alone.
When to avoid
Avoid using a link where the user action is a form submission. In this case, consider the Button component.
Variants
The default variant ensures contrast accessibility on white backgrounds. The inverse variant ensures your links remain visible and legible on darker backgrounds.
Button-styled Links
The Link component can take on the appearance of a button, making it useful for situations where a link action needs to be more prominently featured. While styling links like buttons can enhance UX in some cases, it's crucial to consider context and not overuse this approach. Careful consideration should be given to the content and purpose, to ensure the usage still aligns with a hyperlink and not a submission or action that should use the Button component.