Theme

Style utilities

DescriptionList

OptionCardGroup

SegmentedControl

ConditionViewer

FormattedDateTime

FormattedRelativeTime

KeyboardShortcut

StatusIndicator

ConfirmationModal

Data visualization

Alpha

Series and legend

Menu keyboard shortcuts

Setup flow with a preview

Componentsv3.5.3

fly-label

Migrating fly-label

Source component

Elements (typically span or div) with class fly-label.

Target component

Mapping

PlumaBadge only comes in one size
- fly-label--sm and fly-label--lg become plain PlumaBadge instances
PlumaBadge defaults to the neutral color — always pass a color when migrating a fly-label

table
Fly	Pluma
`fly-label--red`	`@color="red"`
`fly-label--pink`	`@color="raspberry"`
`fly-label--blue`	`@color="blue"`
`fly-label--orange`	`@color="clementine"`
`fly-label--green`	`@color="green"`
`fly-label--teal`	`@color="teal"`
`fly-label--purple`	`@color="purple"`
`fly-label is-error`	`@color="critical"`
`fly-label is-info`	`@color="information"`
`fly-label is-success`	`@color="success"`
`fly-label is-warning`	`@color="caution"`
`fly-label is-beta`	`@color="purple"`
`fly-label is-bordered`	`@color="neutral-outline"`
`fly-label is-pending`	`@color="grey"`

Examples

Source:

<span class="fly-label">Plain label</span>

Target:

<PlumaBadge @color="grey">Plain label</PlumaBadge>

Source:

<span class="fly-label is-error">Error</span>

Target:

<PlumaBadge @color="critical">Error</PlumaBadge>

On this page

Source component

Target component