@atlaskit/button

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Try it out

Interact with a live demo of the @atlaskit/button component.

Installation

npm install @atlaskit/button

Using the component

HTML

This package exports the ak-button React component.

Import the component in your React app as follows:

import Button from '@atlaskit/button';
ReactDOM.render(<Button />, container);

Button

Kind: global class

• Properties

  • Button.appearance : string
  • Button.type : string
  • Button.href : string
  • Button.target : string
  • Button.form : string
  • Button.isDisabled : boolean
  • Button.spacing : string
  • Button.isSelected : boolean
  • Button.theme : boolean
  • Button.iconBefore : element
  • Button.iconAfter : element
  • Button.className : string
  • Button.onClick : function
  • Button.tabIndex : number

new Button()

Create instances of the Button component in a React context.

Button.appearance : string

Predefined appearances of an ak-button. One of: 'primary', 'default', 'subtle', 'compact', 'subtle-link'

Kind: static property of Button
Default: "'standard'"

Button.type : string

Type of the ak-button. One of: 'button', 'submit'.

Kind: static property of Button
Default: "button"

Button.href : string

href of the ak-button. If href is set, button will redirect to href url when clicked.

Kind: static property of Button
Default: "button"

Button.target : string

Standard target attribute for hyperlinks

Kind: static property of Button

Button.form : string

Standard HTML5 form attribute for buttons

Kind: static property of Button

Button.isDisabled : boolean

Option to disable button and every click event

Kind: static property of Button
Default: false

Button.spacing : string

Option to change button's padding. One of: 'none', 'compact', 'default'

Kind: static property of Button
Default: "'default'"

Button.isSelected : boolean

Option to make a button selected

Kind: static property of Button
Default: false

Button.theme : boolean

Option to make have a dark look and feel of a button.

Kind: static property of Button
Default: false

Button.iconBefore : element

iconBefore

Kind: static property of Button

Button.iconAfter : element

iconAfter

Kind: static property of Button

Button.className : string

Any additional classes to apply to the wrapper element.

Kind: static property of Button

Button.onClick : function

Generic onClick button handler

Kind: static property of Button

Button.tabIndex : number

HTML's attribute tab-index

Kind: static property of Button

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!