# ak-lozenge

> A React component that highlights status for quick recognition

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

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.0.4 |
| Published | 2017-01-03 |
| First published | 2016-09-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| 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-lozenge
- Repository: https://bitbucket.org/atlassian/atlaskit
- Homepage: https://bitbucket.org/atlassian/atlaskit#readme
- npm.io page: https://npm.io/package/ak-lozenge

## 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.0.4 (latest) — 2017-01-03
- 5.0.3 — 2016-12-12
- 5.0.2 — 2016-12-01
- 5.0.1 — 2016-11-28
- 5.0.0 — 2016-11-25
- 4.0.3 — 2016-11-09
- 4.0.2 — 2016-11-08
- 4.0.1 — 2016-11-08
- 4.0.0 — 2016-11-07
- 3.0.0 — 2016-11-07
- 2.1.1 — 2016-11-03
- 2.1.0 — 2016-10-19
- 2.0.5 — 2016-10-17
- 2.0.4 — 2016-10-10
- 2.0.3 — 2016-09-29
- … 2 more at https://npm.io/package/ak-lozenge/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-lozenge,ak-lozenge@5.0.4)

# Lozenge

Use lozenges to highlight an item's status for quick recognition. Lozenges can be emphasised and can use color to help convey meanings that users can learn and recognize across our products. Use subtle lozenges by default and in instances where they may dominate the screen, such as in long tables.

![Example lozenge](https://bytebucket.org/atlassian/atlaskit/raw/faeb8e22b4d21b5d42587408fa0ba409b7120a33/packages/ak-lozenge/docs/bold_lozenge.png)

![Example lozenge](https://bytebucket.org/atlassian/atlaskit/raw/faeb8e22b4d21b5d42587408fa0ba409b7120a33/packages/ak-lozenge/docs/standard_lozenge.png)


## Try it out

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

## Installation

```sh
npm install ak-lozenge
```

## Using the component

Import the component in your React app as follows:

```js
import Lozenge from 'ak-lozenge';
ReactDOM.render(<Lozenge />, container);
```

<a name="Lozenge"></a>

## Lozenge
**Kind**: global class  
* Properties

    *  [lozenge.isBold](#Lozenge+isBold) : <code>boolean</code>
    *  [lozenge.appearance](#Lozenge+appearance) : <code>string</code>
    *  [lozenge.children](#Lozenge+children) : <code>node</code>

<a name="new_Lozenge_new"></a>

### new Lozenge()
Create instances of the component programmatically, or using markup.

**JS Example**
```js
import Lozenge from 'ak-lozenge';
const component = new Lozenge();
```
<a name="Lozenge+isBold"></a>

### lozenge.isBold : <code>boolean</code>
Toggles the bolder appearance.

**Kind**: instance property of <code>[Lozenge](#Lozenge)</code>  
**Default**: <code>false</code>  
<a name="Lozenge+appearance"></a>

### lozenge.appearance : <code>string</code>
Affects the visual style of the badge.
Allowed values are: 'default', 'success', 'removed', 'inprogress', 'new', 'moved'.

**Kind**: instance property of <code>[Lozenge](#Lozenge)</code>  
**Default**: <code>&quot;default&quot;</code>  
<a name="Lozenge+children"></a>

### lozenge.children : <code>node</code>
The content passed to the lozenge

**Kind**: instance property of <code>[Lozenge](#Lozenge)</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-lozenge,ak-lozenge@5.0.4).

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-lozenge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._