fly-label

Migrating fly-label


Source component

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

Target component

PlumaLabel

Mapping

  • PlumaLabel only comes in one size
    • fly-label--sm and fly-label--lg become plain PlumaLabel instances
table
FlyPluma
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="red"
fly-label is-info@color="blue"
fly-label is-success@color="green"
fly-label is-warning@color="yellow"
fly-label is-beta@color="purple"
fly-label is-bordered@color="outline"
fly-label is-pending@color="grey" or no @color (defaults to grey)

Examples

Source:

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

Target:

<PlumaLabel>Plain label</PlumaLabel>

Source:

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

Target:

<PlumaLabel @color="red">Error</PlumaLabel>

On this page