Overview

Live draws attention to areas of the page that are dynamically updating.

The ns-live component comprises a loading icon, a helpful message and a subtle animation.

Examples

Configure

Guidance

Do

• Use to wrap small pieces of dynamic content.
• Wrap html elements.
• Use as a slot.
• Keep the contents simple.
• Leave the old content in place whilst busy.
• Remove the busy attribute and update content at the same time.

Don't

• Wrap large parts of the UI.
• Place inside text elements (<p>, <h1> - <h6>).
• Use for media.

Standard

Key

Key	Field type	Guidelines
A	Icon	This is the loading icon
B	Message	Keep this under 10 words and describe to the user what is happening e.g. Updating your quote

Implementation

Placement

Specification

Attributes

busy

Property

busy

Description

The state of the live.

Type

boolean

Default

false

busy-message

Property

busyMessage

Description

The message to display when busy.

Type

string

Default

Updating

aria-live

Property

ariaLive

Description

The aria-live attribute.

Type

string

Options

polite assertive

Default

polite

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		Any HTML flow content.