This is the button. It can be used for call to actions or links.
Package version
npm i module-tsl-ui-elements --save
6.7.7
imports
import { Button, EnhancedButton } from 'module-tsl-ui-elements';
@import '~module-tsl-ui-elements/buttons/button';
icons
To use the icons you just have to pass icon="name"
and then you will need to specify the css for that icon, with the color matching the theme of the button.
.tds-btn--primary .icon--name { @include generate-icon(tds-name, $color-white); }
The colors for the themes are:
primary:
$color-white
secondary, tertiary:
$color-cornflower-blue-20k
primary-monotone:
$color-white
secondary-monotone, tertiary-monotone:
$color-k-70
primary-inverse:
$color-k-87
secondary-inverse, tertiary-inverse:
$color-white
primary-warning:
$color-white
secondary-warning, tertiary-warning:
$color-french-rose-20k
example (editable)
<React.Fragment> <Button>Click me</Button> <br /> <br /> <Button icon="plus">Click me</Button> <br /> <br /> <EnhancedButton> <Button onClick={() => console.log('clicked icon')} icon="remove" size="sm" /> <Button onClick={() => console.log('clicked button')} > Ctay (8) </Button> </EnhancedButton> </React.Fragment>
Props
We couldn't detect props! Check if __docgenInfo is correctly defined