PlainLink
The PlainLink is a foundational component with minimal styling used to build other link components in Pluma.
Anatomy
'%20fill='%23843CC7'/%3e%3crect%20x='96'%20y='104.04'%20width='24'%20height='24'%20rx='12'%20fill='%234B00E2'/%3e%3cpath%20d='M109.534%20111.358V121.54H107.993V112.899H107.933L105.497%20114.49V113.019L108.037%20111.358H109.534Z'%20fill='white'/%3e%3c/svg%3e)
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Label | Describes the PlainLink's destination. |
Guidelines
When to use
PlainLink is an unstyled link primitive used to build the Link component. Use the PlainLink when a design calls for link behavior without any of the Link's built-in visual styling, such as wrapping a whole card, an icon-and-label group, or an image in a single clickable region.
If the element requires a standard hyperlink or an inline action styled like one, use Link instead.
External links
Mark a link as external when it points to a URL outside the application, so users aren't unexpectedly taken away without warning. External links are detected automatically based on the URL, or can be set explicitly, and open in a new tab with the correct safe HTML attributes already applied.
PlainLink vs. Link, Button, and PlainButton
- PlainLink is an unstyled anchor primitive used to build the Link. Use it when you need a custom hyperlink without button features like loading states.
- Link is a fully-styled hyperlink with variants, icons, and underline behavior. Use it for navigation within text or for standalone links.
- Button is a fully-styled interactive element with variants, sizes, icons, and state treatments. Use it for standard actions like submitting forms, opening dialogs, or navigating as a CTA.
- PlainButton is an unstyled button primitive with loading and disabled support used to build the Button. Use it to build custom interactive elements that need their own visual design.
Best practices
Custom styling
PlainLink offers styling flexibility that Link doesn't provide. Use it when a design calls for a treatment the Link doesn't support, such as turning an entire card or icon-and-label group into a single clickable region.
Nested interactive elements
Keep PlainLink content static. Avoid nesting other interactive elements inside the PlainLink as doing so may confuse users. Assistive technology and keyboard navigation are also negatively affected.
For more information from an accessibility standpoint, see Interactive elements under the Accessibility tab.
Types
By default, PlainLink renders as an anchor element that navigates to a URL, downloads a file, or opens an email or phone link.
PlainLink can render as a button element to trigger an inline action, while remaining unstyled.
Behaviors
States
PlainLink applies no styling of its own, so the base state looks exactly like the content passed as children.
Disabled PlainLinks cannot be interacted with. Visual treatment for the disabled state is left entirely to the wrapped content.
Content
If writing PlainLink labels, content should be similar to what's written for the Link component. Adhere to writing labels that clearly describe the destination or action in 1-3 words. For more information, see the Content section of the Link's design documentation.