Button

This is React implementation of the Button.

Basic example usage


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


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

Example usage with third-party component

So if you use a third-party component, the Button will take on all of its proper attributes.


                                                
                                                import { RouterLink } from 'react-router-dom';
                                                
                                                <Button elementType={RouterLink} to="/">
                                                  Link to home
                                                </Button>;

API

Name	Type	Default	Required	Description
children	ReactNode	null	✕	Content of the Button
color	Action Color dictionary, Emotion Color dictionary	primary	✕	Color variant
elementType	ElementType	button	✕	Type of element
isBlock	bool	false	✕	Span the element to the full width of its parent
isDisabled	bool	false	✕	If true, Button is disabled
isLoading	bool	false	✕	If true, Button is in a loading state, disabled and the Spinner is visible
isSquare	bool	false	✕	If true, Button is square, usually only with an Icon
name	string	—	✕	For use a button as a form data reference
onClick	string	null	✕	JS function to call on click
ref	ForwardedRef<HTMLButtonElement>	—	✕	Button element reference
size	Size dictionary	medium	✕	Size variant
type	string	button	✕	Type of the Button

For more information see Button component. Button also contain all the appropriate attributes according to the type of element. The default element type for Button is <button>.

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

Live code

Storybook

Usage

Button

Basic example usage

Example usage with third-party component

API