Link
Links take their color from the color classes and mix it toward the text color, so they stay readable.
A link without a class uses the neutral base color. It underlines on hover and
shows a focus ring for keyboard users. role="link" gets the same look.
Read the getting started guide first.
Colors
A color class changes only the text color, never the background.
States and current page
aria-current marks the current page or item with the hover look.
.hover, .active and .focus show a state
without interaction, and .disabled fades the link and blocks clicks.
Current page · Hover · Focus · Disabled
Link as a button
role="button" turns a link into a button.
Variables
| Variable | Default |
|---|---|
--i-link-text-decoration | underline |