ButtonLink

Basic example usage


                                                
                                                import { ButtonLink } from '@lmc-eu/spirit-web-react';


                                                
                                                  <ButtonLink color="primary">Click me</ButtonLink>
                                                  <ButtonLink color="secondary">Click me</ButtonLink>
                                                  <ButtonLink color="tertiary">Click me</ButtonLink>
                                                  <ButtonLink color="inverted">Click me</ButtonLink>
                                                  <ButtonLink color="success">Click me</ButtonLink>
                                                  <ButtonLink color="informative">Click me</ButtonLink>
                                                  <ButtonLink color="warning">Click me</ButtonLink>
                                                  <ButtonLink color="danger">Click me</ButtonLink>

API

Name	Type	Default	Required	Description
children	ReactNode	null	✕	Content of the ButtonLink
color	Action Color dictionary, Emotion Color dictionary	primary	✕	Color variant
elementType	ElementType	a	✕	Type of element
href	string	—	✔	Link URL
isBlock	bool	false	✕	Span the element to the full width of its parent
isDisabled	bool	false	✕	If true, ButtonLink is disabled
isLoading	bool	false	✕	If true, ButtonLink is in a loading state, disabled and the Spinner is visible
isSquare	bool	false	✕	If true, ButtonLink is square, usually only with an Icon
onClick	string	null	✕	JS function to call on click
ref	ForwardedRef<HTMLAnchorElement>	—	✕	Anchor element reference
size	Size dictionary	medium	✕	Size variant
target	string	null	✕	Link target

For more information see Button component. ButtonLink also contain all the appropriate attributes according to the type of element.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Button Link

Live code

Storybook

Usage

ButtonLink

Basic example usage

API