Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WIP/draft PR for discussion and feedback. @Supriya-Arora: this is carved out from a bigger piece of work around menus/navbars. Also cc'ing @ty2k for input — we've discussed this a little bit, would appreciate your take.
This PR adds a new Link component, based on RAC Link. Docs and examples are included in Storybook.
As the name suggests, Link is a utility component for creating accessible and extensible hyperlinks. In the design system context, its primary usage is in navigation (eg. populating menus within the Header and Footer components), but it can also be used inline.
Text links
Link text is populated using the
children
slot. Link behaviour is configured using thehref
(renders a standard<a>
element) oronPress
(renders a<span>
with the ARIA "link" role) props. See the RAC docs for information about events and routing.A Link renders with the
.bcds-react-aria-Link
class. Thesize
anddanger
props are used to append additional classes (toggling between S/M/L text sizes and a red colourway for destructive or dangerous links.)The user can override link styling entirely by either:
className
isUnstyled
prop, which removes all styling and allows a link to inherit its styles from its parentsA Link can be disabled using
isDisabled
.Link buttons
Using the
isButton
prop, Link can also be styled to look and behave like the Button component. WhenisButton
is set, Link will render with the.bcds-react-aria-Button
class instead of.bcds-react-aria-Link
. ThebuttonVariant
prop replicates the functionality ofvariant
on the Button component. Link importsButton.css
directly to avoid duplicating styles.The reasoning for this functionality is to better align with how RAC Button works:
Unlike our Button component, Link supports the
href
prop natively.