Package Exports

@commercetools-uikit/secondary-button
@commercetools-uikit/secondary-button/dist/commercetools-uikit-secondary-button.cjs.js
@commercetools-uikit/secondary-button/dist/commercetools-uikit-secondary-button.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@commercetools-uikit/secondary-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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