Coming from Orbiter, you should be aware of the following changes:
onClickhas been renamed toonPressto be closer to the React Aria API.Counteris no longer allowed as a specialized slot.ButtonAsLinkis renamed toLinkButton.
LinkButton
A LinkButton looks like a button but behaves like a link.
Anatomy
Composed Components
A LinkButton uses the following components.
Usage
Variants
A link button can use different variants.
Primary - For the principal call to action on the page. Primary buttons should only appear once per screen — not including the application header, modal or side panel.
Secondary - For secondary actions on each page. Secondary buttons can be used in conjunction with a primary link button or on its own. Paired with a Primary link button, the secondary link button usually performs the negative action of the set, such as “Cancel.”
Upsell - For upsell actions that relate to upgrading an account or a plan. Use the upsell link button to distinguish it from an existing primary link button. In some cases, a primary link button can be used instead when the general context of the page is about upselling.
Danger - For actions that could have destructive effects on the user’s data.
Ghost-[primary|secondary|danger] - For less prominent, and sometimes independent, actions. Ghost buttons can be used in isolation or paired with a primary link button when there are multiple calls to action. Ghost buttons can also be used for subtasks on a page where a primary link button for the main and final action is present.
Sizes
A link button can vary in size.
Disabled
A link button can be disabled.
External
Add rel="noopener noreferrer" and target="_blank" attributes to render and external link button.
No Href
When a link button link does not have an href prop, it is rendered as a <span role="link"> instead of an <a>. Events will need to be handled in JavaScript with the onPress prop.
Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply.
Fluid
A link button can be expanded to full width to fill its parent container.
Icon Only
A link button can contain only an icon.
Icon
A link button can contain icons.
End Icon
Nonstandard end icons can be provided to handle special cases. However, think twice before adding end icons, start icons should be your go-to.
Props
- variant?
- size?
- isFluid?
- style?
- autoFocus?
- href?
- hrefLang?
- target?
- rel?
- download?
- ping?
- referrerPolicy?
- routerOptions?
- children?
- className?
The visual style of the button.
Defaults to primary.
A button can vary in size.
Defaults to md.
Whether or not the button takes up the width of its container.
The inline style for the element. A function may be provided to compute the style based on component state.
Whether the element should receive focus on render.
A URL to link to. See MDN.
Hints at the human language of the linked URL. SeeMDN.
The target window for the link. See MDN.
The relationship between the linked resource and the current page. See MDN.
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
A space-separated list of URLs to ping when the link is followed. See MDN.
How much of the referrer to send when following the link. See MDN.
Options for the configured client side router.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
- onPress?
- onPressStart?
- onPressEnd?
- onPressChange?
- onPressUp?
- onFocus?
- onBlur?
- onFocusChange?
- onKeyDown?
- onKeyUp?
- onHoverStart?
- onHoverEnd?
- onHoverChange?
Handler that is called when the press is released over the target.
Handler that is called when a press interaction starts.
Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
Handler that is called when the press state changes.
Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
Handler that is called when the element receives focus.
Handler that is called when the element loses focus.
Handler that is called when the element's focus status changes.
Handler that is called when a key is pressed.
Handler that is called when a key is released.
Handler that is called when a hover interaction starts.
Handler that is called when a hover interaction ends.
Handler that is called when the hover state changes.
- isDisabled?
- aria-label?
- aria-labelledby?
- aria-describedby?
- aria-details?
Whether the link is disabled.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
- slot?
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.