'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=icon}
Links are used to navigate to a new location, open or download an asset, or serve as an inline action.
For more details on how to set up the link component on PlumaProvider, visit the provider's docs.
Usage
Link works just like PlainLink:
The isExternal prop is automatically inferred from the URL (http://, https://, mailto:, tel:), but you can still explicitly set it if needed:
Primary
Underlined
To render the component in the "underlined" variant, use the isUnderlined prop:
Secondary
To render the component in the "secondary" variant, use the variant prop.
Underlined
To render the component without an underline, use the isUnderlined prop:
Icons
A Link can also be rendered with an icon, for example:
The icon can be placed on either side of the text via the iconPosition prop (by default, leading):
Custom icons
If you need to use a custom icon that isn't part of the Pluma Icon set, you can use the iconSrc prop to provide a URL to an image. The image will be automatically sized to match the button's icon size:
Custom image icons support the same positioning options as standard icons:
Two icons at once
iconLeading and iconTrailing are shortcuts for a fixed side, so a link can carry an
icon on each side. They render in addition to icon rather than replacing it.
Custom elements
Use elementBefore and elementAfter for leading or trailing content that isn't an
icon. elementBefore renders between any leading icon and the text; elementAfter
renders between the text and any trailing icon. Both compose with the icons rather than
replacing them, and pick up the same spacing the icons use — including when the link
sits inside a paragraph.
In React, both are node props. In Ember, they can be passed as a component or, more
commonly, via the :elementBefore and :elementAfter named blocks (the text is then
provided via the :default block).
Buttons with link styles
You may sometimes need to render a button tag that's styled like the Link component.
For example, you might want to render a clickable button inside a paragraph, which
will perform an action on click (rather than navigating somewhere).
To do so, pass in the onClick prop to the Link component:
API
If true, the link will automatically show the spinner when the onClick function is called and it returns a promise.
If false, the spinner will only show if the isLoading prop is set to true. By default, this is true.
Custom content to render in the trailing (after) slot of the link, between the
text and any trailing icon. In React this is a node; in Ember it can be passed as
a component or provided via the :elementAfter named block.
Custom content to render in the leading (before) slot of the link, between any
leading icon and the text. In React this is a node; in Ember it can be passed as
a component or provided via the :elementBefore named block.
The URL passed into the link component (or a tag)
The name of an icon (from Pluma Icons) to render in the link
Override an icon's vertical alignment. By default the alignment is uppercase when the position is leading, and lowercase when the position is trailing
The name of an icon (from Pluma Icons) to render before the text. A shortcut for
icon with iconPosition="leading" that can be combined with iconTrailing to
render an icon on each side. Renders in addition to icon, never in place of it.
Default:leading
Which side of the text the icon should be rendered on. leading renders the icon before the text, trailing renders it after.
Default:sm
What size to render the icon in (if an icon is provided)
The source URL of a custom image icon to render in the link. When provided, this will be rendered using the Image component with icon sizing. Use v2 sizing (icon-v2-sm, icon-v2-md, icon-v2-lg, icon-v2-xl) for new implementations. The image will always have alt="" as it is purely decorative - meaning comes from link text or aria-label.
The name of an icon (from Pluma Icons) to render after the text. A shortcut for
icon with iconPosition="trailing" that can be combined with iconLeading to
render an icon on each side. Renders in addition to icon, never in place of it.
Whether the link should be disabled (this prevents click handlers from firing)
Whether the link should render in an error state
When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists.
Additionally, target="_blank" rel="noopener noreferrer" will be added automatically
Shows a spinner in the link overlaid on top of the link's content. The link will act as if disabled while in the loading state.
Whether the link should be underlined
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
Whether the content of the link should be truncated if it overflows its container.
Legacy compatibility styles will be removed in the next major version. Components already render in the target style by default.
Legacy styling flag for backwards compatibility
Default:primary
The visual style variant of the link
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto: