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="plain">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>;

How to Make a Fluid Button

To span a Button to the full width of its parent, you can use display utility classes or Grid to achieve the desired layout.

                                                
                                                <div className="d-grid">
                                                  <Button>Primary block-level Button</Button>
                                                </div>
                                                <div className="d-grid d-tablet-block">
                                                  <Button>Primary responsive block-level Button</Button>
                                                </div>
                                                <Grid
                                                  cols={{ mobile: 1, tablet: 2 }}
                                                  spacing="space-1100"
                                                >
                                                  <Button>Primary responsive block-level Button</Button>
                                                  <Button color="secondary">Secondary responsive block-level Button</Button>
                                                </Grid>

DEPRECATION NOTICE

Property isBlock is deprecated and will be removed in the next major release.

For more information, please read the section How to Make a Fluid Button.

API

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.

Icons

This component uses the Icon component internally. To ensure correct rendering, please refer to the Icon component documentation for setup instructions.

Icon sizes differ based on button size. You can always set your desired size of an icon with boxSize prop.

Button and Icon Sizes

You can always set your desired size of an icon with the boxSize prop.