span

span displays a short piece of text that can be styled independently.

XML Element

span

Java Class

Span

Basics

LIVE DEMO

Like its HTML counterpart, span adds and styles inline text. Each span is a separate component, so its styling applies to the entire value of its text attribute.

Use the html component to include native HTML directly.

The example places several span elements in one list item so that individual parts of the sentence can have different styles:

<listItem>
    <span classNames="text-semibold" text="Bold text: "/>
    <span text="Use the &lt;b&gt; tag to make text "/>
    <span classNames="text-semibold" text="bold."/>
</listItem>

Theme Variants

Use the themeNames attribute to style the text as a badge. Combine badge with color, emphasis, shape, or size variants.

Variant Description Supported By

badge

Applies badge styling.

Aura, Lumo

success, warning, error, contrast

Applies a semantic color.

Aura, Lumo

primary

Adds stronger visual emphasis.

Aura, Lumo

pill

Rounds the badge corners.

Aura, Lumo

small

Makes the badge smaller.

Aura, Lumo

normal

Uses the regular badge size.

Aura, Lumo

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to span:

Name Description Default

themeNames

Applies one or more variants listed in Theme Variants.

—

Handlers

Common handlers are configured in the same way for all components. The following handlers are specific to span:

Name Description

ClickEvent

Fires when the component is clicked. Use the click, singleClick, or doubleClick subject to select the click pattern.

See Also