@commercetools-uikit/secondary-button
TypeScript icon, indicating that this package has built-in type declarations

19.13.0 • Public • Published

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

Dependencies (11)

Dev Dependencies (3)

Package Sidebar

Install

npm i @commercetools-uikit/secondary-button

Weekly Downloads

8,136

Version

19.13.0

License

MIT

Unpacked Size

285 kB

Total Files

12

Last publish

Collaborators

  • emmenko
  • commercetools-admin
  • tdeekens