Link
Live demo
Inherited text size links
This is a “text-underline” variant, hope you have enjoyed the show.
This is a “text-link” variant, hope you have enjoyed the show.
This is a disabled link(text-link), soz.
Fixed size links
| Small link | Medium link |
|---|---|
| Small link with icon on left | Medium link with icon on left |
| Small link with icon on right | Medium link with icon on right |
Button styled links
| Small button | Medium button | Large button |
|---|---|---|
| Solid button | Solid button | Solid button |
| Solid button | Solid button | Solid button |
| Solid button | Solid button | Solid button |
| Solid disabled | Solid disabled | Solid disabled |
| Outline button | Outline button | Outline button |
| Outline button | Outline button | Outline button |
| Outline button | Outline button | Outline button |
| Outline disabled | Outline disabled | Outline disabled |
Icon buttons
| Small button | Medium button | Large button |
|---|---|---|
| Show password | Show password | Close |
Design
The links come in two sizes, Medium and Small. They are made up of text styles, a bottom borders, and icons. Using the primary, lighter and darker versions of our primary color.
Anatomy
The margin between the text and the underline is equal to 2 px.
The text and the underline are always positioned in the center of the container.
The height of the container for Medium Default and Medium Default underlined links equals 18 pixels. So when no underline — there are 1px top and bottom margins.
The height of the container for Small Default and Small Default underlined links equals 16 pixels. So when no underline — there are 1px top and bottom margins.
Text (with Underline) in Links with Icons is always centered according to the icon.
The height of the container for Medium with Icon link equals 24 pixels. So when no underline — there are 4px top and bottom margins.
The height of the container for Small with Icon link equals 20 pixels. So when no underline — there are 3px top and bottom margins.
Usage
Links are used as a references to data that the user can follow by clicking or tapping.
Behaviour
Links have 5 states:
- Default (allow user to click this text link)
- Hover (usual hover state)
- Focus (for click the link using the keyboard buttons)
- Disabled (show the link but don’t allow to click on this according to some restrictions)
- Visited
The ‘Visited’ state should use the same values as the ‘Default’ state, or it will be distracting in the context the links are being used.
Hover/Focus transition
0.25 ease (To be reviewed in browser)
Accessibility of disabled text link / button
Use the disabled or aria-disabled attributes to convey information to screen readers.
Add to your disabled styles cursor: not-allowed this will serve as another visual indicator for mouse users.
Note: We don’t foresee the need for the disabled link state to be used on it’s own, so the legibility of this state will need to be reviewed in a context basis, when we look at states of pagination links for instance.
Code
import { Link } from '@shieldpay/bumblebee/link'; import InfoIcon from '@shieldpay/bumblebee/icons/InfoIcon'; <Link href="#" LeftIcon={InfoIcon} disabled> disabled underlined link with icon on left </Link>; <Link href="#" RightIcon={InfoIcon} variant="text-link"> link with icon on right </Link>; <LinkDisabled size="medium" variant="text-underline"> Disabled </LinkDisabled>;