ak-lozenge v5.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.

Try it out

Interact with a live demo of the ak-lozenge component with code examples.

Installation

npm install ak-lozenge

Using the component

Import the component in your React app as follows:

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

Lozenge

Kind: global class

• Properties

  • lozenge.isBold : boolean
  • lozenge.appearance : string
  • lozenge.children : node

new Lozenge()

Create instances of the component programmatically, or using markup.

JS Example

import Lozenge from 'ak-lozenge';
const component = new Lozenge();

lozenge.isBold : boolean

Toggles the bolder appearance.

Kind: instance property of Lozenge
Default: false

lozenge.appearance : string

Affects the visual style of the badge. Allowed values are: 'default', 'success', 'removed', 'inprogress', 'new', 'moved'.

Kind: instance property of Lozenge
Default: "default"

lozenge.children : node

The content passed to the lozenge

Kind: instance property of Lozenge

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!