# ak-button

> A React component that is used to trigger events.

Latest version **5.4.3** (published 2017-01-24) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ak-button
pnpm add ak-button
yarn add ak-button
bun add ak-button
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.4.3 |
| Published | 2017-01-24 |
| First published | 2016-08-22 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Atlassian Pty Ltd |
| Maintainers | atlassian-aui |
| Keywords | atlaskit, ui |

## Links

- npm: https://www.npmjs.com/package/ak-button
- Repository: https://bitbucket.org/atlassian/atlaskit
- Homepage: https://bitbucket.org/atlassian/atlaskit#readme
- npm.io page: https://npm.io/package/ak-button

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6
- [akutil-shared-styles](https://npm.io/package/akutil-shared-styles.md) ^37.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 5.4.3 (latest) — 2017-01-24
- 5.4.2 — 2017-01-20
- 5.4.1 — 2017-01-18
- 5.4.0 — 2017-01-16
- 5.3.0 — 2017-01-13
- 5.2.0 — 2017-01-12
- 5.1.11 — 2017-01-11
- 5.1.3 — 2017-01-03
- 5.1.2 — 2017-01-03
- 5.1.1 — 2016-12-27
- 5.1.0 — 2016-12-20
- 5.0.3 — 2016-12-13
- 5.0.2 — 2016-12-08
- 5.0.1 — 2016-12-06
- 5.0.0 — 2016-12-05
- … 46 more at https://npm.io/package/ak-button/versions

## README

[![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://Commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/GitHub-semantic_release-ffab00.svg)](https://github.com/semantic-release/semantic-release)
[![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-button,ak-button@5.4.3)

# Button

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

![Example buttons](https://bytebucket.org/atlassian/atlaskit/raw/bd98c205505896c1f4d44e6659f6aa944386534b/packages/ak-button/docs/button_1.png)

![Example buttons](https://bytebucket.org/atlassian/atlaskit/raw/bd98c205505896c1f4d44e6659f6aa944386534b/packages/ak-button/docs/button_2.png)

## Try it out

Interact with a [live demo of the ak-button component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-button/5.4.3/).

## Installation

```sh
npm install ak-button
```

## Using the component

### HTML
This package exports the `ak-button` React component.

Import the component in your React app as follows:

```javascript
import Button from 'ak-button';
ReactDOM.render(<Button />, container);
```

<a name="Button"></a>

## Button
**Kind**: global class  
* Properties

    *  [Button.appearance](#Button.appearance) : <code>string</code>
    *  [Button.type](#Button.type) : <code>string</code>
    *  [Button.href](#Button.href) : <code>string</code>
    *  [Button.target](#Button.target) : <code>string</code>
    *  [Button.form](#Button.form) : <code>string</code>
    *  [Button.isDisabled](#Button.isDisabled) : <code>boolean</code>
    *  [Button.spacing](#Button.spacing) : <code>string</code>
    *  [Button.isSelected](#Button.isSelected) : <code>boolean</code>
    *  [Button.theme](#Button.theme) : <code>boolean</code>
    *  [Button.iconBefore](#Button.iconBefore) : <code>element</code>
    *  [Button.iconAfter](#Button.iconAfter) : <code>element</code>
    *  [Button.className](#Button.className) : <code>string</code>
    *  [Button.onClick](#Button.onClick) : <code>function</code>
    *  [Button.tabIndex](#Button.tabIndex) : <code>number</code>

<a name="new_Button_new"></a>

### new Button()
Create instances of the Button component in a React context.

<a name="Button.appearance"></a>

### Button.appearance : <code>string</code>
Predefined appearances of an ak-button. One of:
'primary', 'default', 'subtle', 'compact', 'subtle-link'

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>&quot;&#x27;standard&#x27;&quot;</code>  
<a name="Button.type"></a>

### Button.type : <code>string</code>
Type of the ak-button. One of:
'button', 'submit'.

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>&quot;button&quot;</code>  
<a name="Button.href"></a>

### Button.href : <code>string</code>
href of the ak-button.
If href is set, button will redirect to href url when clicked.

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>&quot;button&quot;</code>  
<a name="Button.target"></a>

### Button.target : <code>string</code>
Standard target attribute for hyperlinks

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.form"></a>

### Button.form : <code>string</code>
Standard HTML5 form attribute for buttons

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.isDisabled"></a>

### Button.isDisabled : <code>boolean</code>
Option to disable button and every click event

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>false</code>  
<a name="Button.spacing"></a>

### Button.spacing : <code>string</code>
Option to change button's padding. One of:
'none', 'compact', 'default'

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>&quot;&#x27;default&#x27;&quot;</code>  
<a name="Button.isSelected"></a>

### Button.isSelected : <code>boolean</code>
Option to make a button selected

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>false</code>  
<a name="Button.theme"></a>

### Button.theme : <code>boolean</code>
Option to make have a dark look and feel of a button.

**Kind**: static property of <code>[Button](#Button)</code>  
**Default**: <code>false</code>  
<a name="Button.iconBefore"></a>

### Button.iconBefore : <code>element</code>
iconBefore

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.iconAfter"></a>

### Button.iconAfter : <code>element</code>
iconAfter

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.className"></a>

### Button.className : <code>string</code>
Any additional classes to apply to the wrapper element.

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.onClick"></a>

### Button.onClick : <code>function</code>
Generic onClick button handler

**Kind**: static property of <code>[Button](#Button)</code>  
<a name="Button.tabIndex"></a>

### Button.tabIndex : <code>number</code>
HTML's attribute tab-index

**Kind**: static property of <code>[Button](#Button)</code>  

## 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](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-button,ak-button@5.4.3).

Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).


### Create a support ticket

Are you in trouble? [Let us know](https://ecosystem.atlassian.net/browse/AK)!

---
_Source: https://npm.io/package/ak-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._