Link
A pure CSS component
Anatomy
There are 5 different link anatomies, each requiring specific accessibility attributes.
Text
Text link does not require additonal attibutes
Text and SVG
svg
tag requires aria-hidden="true"
to hide it from screen readers as the the text already include the necessary information
SVG
a
tag requires aria-label="Go to destination"
to indicate the destination to user information
External
a
tag requires target="_blank"
to open the link in a new window
svg
tag requires title
tag
to decribe the opening in a new window
Download link
svg
tag requires title
tag
to describe the size and format of the downloaded file
Modifier
Each link can be styled with modifiers.
You can mix as many modifiers modifiers on the same link, however you can choose only one choice per modifer
For convenience the default variant name is omited, meaning there is no need to add the default name class
Font Color
Set the font color of each link
Options: inherit(default), base, brand, alert
Size
Set the size of each button
Options: inherit(default), sm, md, lg, xl
RTL
RTL support for link with icon
Mix
Mix as many modifiers for each link
Custom (Tailwind)
If you are using Tailwind styling, you can customize each button with Tailwind utilities
Templates
Link components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.