Elements (typically span or div) with class fly-alert. A fly-alert predates the FlyBanner component - it's a simply container with a colored background and text.

A fly-alert doesn't have built-in support for a stylized title. Typically, a bolded inline title is included by the developer by making part of the text bold. If such an inline title exists, it should be made into the PlumaBanner's title argument, even though the layout ends up being a bit different.

Source:

<div class="fly-alert is-warning">
  <strong>Heads up!</strong>
  Your segment was not able to sync.
</div>

Target:

<PlumaBanner @title="Heads up!" @variant="caution" @icon={{null}}>
  Your segment was not able to sync.
</PlumaBanner>

Icons

A fly-alert doesn't have built-in support for an icon. If a custom icon is embedded in the alert, it should be ignored - PlumaBanner includes default icons for each variant.

Source:

<div class="fly-alert is-warning">
  <FlyIcon @icon="error" class="mr-0.5" />
  <strong>Heads up!</strong>
  Your segment was not able to sync.
</div>

Target:

<PlumaBanner @title="Heads up!" @variant="caution" @icon={{null}}>
  Your segment was not able to sync.
</PlumaBanner>

If a fly-alert doesn't contain any icons, it is possible to disable the icon on a PlumaBanner as well, by passing @icon={{null}}. However, this is not recommended, and the default per-variant icons should be used instead.

Stateful alerts

A fly-alert may contain additional classes to color it. The equivalent PlumaBanner args are as follows:

table
Fly	Pluma
`fly-alert is-danger`	`@variant="error"`
`fly-alert is-error`	`@variant="error"`
`fly-alert is-info`	`@variant="information"`
`fly-alert is-notice`	(default variant, no argument)
`fly-alert is-system`	(default variant, no argument)
`fly-alert is-success`	`@variant="success"`
`fly-alert is-warning`	`@variant="caution"`
`fly-alert is-beta`	no direct equivalent, `@variant="feature"` may be used

Dismissable alerts

A fly-alert may contain a "close" button, typically a small X ("close") icon. PlumaBanner supports rendering such a button by passing in a callback function as the @onClose argument.

Source:

<div
  class="fly-alert is-success"
  role="alert"
>
  <PlumaInlineStack @alignBlock="center">
    <FlyIcon
      class="mr-1"
      @icon="check-circle"
    />
    <p class="font-bold">{{this.alert.title}}</p>
  </PlumaInlineStack>
  <PlumaParagraph @ml="300" @mt="050" @mb="0">{{this.alert.body}}</PlumaParagraph>
  <button
    type="button"
    class="fly-btn fly-btn--link fly-btn-sm p-0"
    {{on "click" this.closeAlert}}
  >
    <FlyIcon @icon="close" @size="lg" />
  </button>
</div>

Target:

<PlumaBanner
  @title={{this.alert.title}}
  @variant="success"
  @onClose={{this.closeAlert}}
>
  {{this.alert.body}}
</PlumaBanner>

Custom actions

A fly-alert may contain a custom action button. PlumaBanner supports this via an @action argument, which expects an object with a label string and onClick callback.

Source:

<div class="fly-alert is-danger mb-0" ...attributes>
  <PlumaInlineStack @alignBlock="center" @alignInline="space-between">
    <div class="fly-alert__text">
      <FlyIcon @icon="error" class="inline-block mr-0.5" />
      <PlumaStrong>Heads up!</PlumaStrong>
      Your segment was not able to sync.
    </div>

    <PlumaBox @flex={{1}} @maxW="full" @minW="0" />

    <button
      type="button"
      class="button-link"
      {{on "click" this.toggleDetails}}
    >
      {{if this.showDetails "Hide" "View"}}
      Details
    </button>
  </PlumaInlineStack>
</div>

Target:

<PlumaBanner
  @title="Heads up!"
  @variant="error"
  @action={{hash
    label=(if this.showDetails "Hide Details" "View Details")
    onClick=this.toggleDetails
  }}
>
  Your segment was not able to sync.
</PlumaBanner>

Examples

Source:

<div class="fly-alert is-danger">
  This is warning text.
</div>

Target:

<PlumaBanner @variant="error">
  This is warning text.
</PlumaBanner>

fly-alert

Source component

Target component

Mapping

Title vs content

Icons

Stateful alerts

Dismissable alerts

Custom actions

Examples

On this page