Tes styleguide

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';

Overview

primary

secondary

tertiary

primary-monotone

secondary-monotone

tertiary-monotone

primary-inverse

secondary-inverse

tertiary-inverse

primary-warning

secondary-warning

tertiary-warning

icon="plus"

theme="secondary"

icon="plus"

theme="tertiary"

icon="plus"

Enhanced buttons wrapper

import { Button, EnhancedButton } from 'module-tsl-ui-elements';
<EnhancedButton>
  <Button
    disabled={disabled}
    size={clickableIconSize}
    onClick={() => console.log('clicked icon')}
    icon="remove"
  />
  <Button
    onClick={() => console.log('clicked button')}
    disabled={disabled}
    size={enhancedButtonSize}
  >
    Ctay (8)
  </Button>
</EnhancedButton>

import { Button, EnhancedButton } from 'module-tsl-ui-elements';
<EnhancedButton iconRight>
  <Button
    disabled={disabled}
    size={clickableIconSize}
    onClick={() => console.log('clicked icon')}
    icon="remove"
  />
  <Button
    onClick={() => console.log('clicked button')}
    disabled={disabled}
    size={enhancedButtonSize}
  >
    Ctay (8)
  </Button>
</EnhancedButton>

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

storybook

View Button storybook stories