Buttons: Secondary Button

Description

Secondary buttons are used in combination with a PrimaryButton given a converse secondary action on a page. You must also pass a label for accessibility reasons.

Usage

import SecondaryButton from '@commercetools-uikit/secondary-button';

<SecondaryButton
  iconLeft={<InformationIcon />}
  label="Alerts a message"
  onClick={() => alert('Button clicked')}
/>;

Properties

| Props | Type | Required | Values | Default | Description | | ------------------ | --------------------- | :------: | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | label | string | ✅ | - | - | Should describe what the button does, for accessibility purposes (screen-reader users) | | iconLeft | node | - | - | - | The left icon displayed within the button | | iconRight | node | - | - | - | The right icon displayed within the button | | isToggleButton | bool | ✅ | - | false | If this is active, it means the button will persist in an "active" state when toggled (see isToggled), and back to normal state when untoggled | | isToggled | bool | - | - | - | Tells when the button should present a toggled state. It does not have any effect when isToggleButton is false | | theme | string | - | default, info | default | The component may have a theme only if isToggleButton is true. This property has been deprecated in favor of tone. | | tone | string | - | secondary, info | secondary | Indicates the color scheme of the button | | size | string | - | 'medium' , 'big' | 'big' | Indicates the size of the button. | | isDisabled | bool | - | - | - | Tells when the button should present a disabled state | | buttonAttributes | object | - | - | - | Allows setting custom attributes on the underlying button html element | | type | string | - | submit, reset, button | button | Used as the HTML type attribute. | | onClick | func | | - | - | What the button will trigger when clicked | | to | string or object | - | - | - | Where the button should redirect when clicked | | as | string or element | - | - | - | You may pass in a string like "a" to have the button render as an anchor tag instead. Or you could pass in a React Component, like a Link. |

The component further forwards all valid HTML attributes to the underlying button component.

Main Functions and use cases are:

• Secondary action example: Discard changes

• Restoring state example: Canceling a form