fly-btn

Source component

Plain HTML elements containing the fly-btn class, and additional state or variant classes. See fly-btn documentation for more details.

Target component

PlumaButton

Mapping

• convert plain fly-btn (no variant) to @variant="secondary"
• convert fly-btn--primary to @variant="primary"
• convert fly-btn--subtle to @variant="subtle"
• convert fly-btn--outline to @variant="secondary"
• convert fly-btn--tertiary to @variant="tertiary"
• convert disabled attribute and is-disabled class to @isDisabled={{true}} argument
• convert fly-btn--sm sized buttons to @size="sm"
• fly-btn--lg has no equivalent in Pluma, use default size instead
• convert fly-btn--block (full width button) to:
  • @w="full" if not in a flex container
  • @flexGrow="1" if in a flex container

Icons in buttons

In Fly, icons were put in the button tag contents. In Pluma, PlumaButton accepts an @icon argument. Additionally, PlumaButton:

• accepts @iconPosition (default leading or trailing) for placement before or after the button text
• @isIconOnly for buttons with only an icon
  • when a button is icon only, it's recommended to also add an aria-label for accessibility

Click handlers

In Fly, click handlers are attached with Ember modifiers {{on "click" this.callback}}. In Pluma, use the @onClick argument instead.

Loading state

In Fly, a conditional loading state may be a button containing a fly-spinner element, and in a disabled state. In Pluma, use the @isLoading argument instead.

Examples

Source:

<button
  class="fly-btn fly-btn--primary"
  {{on "click" this.handleClick}}
>
  Click me
</button>

Target:

<PlumaButton
  @variant="primary"
  @onClick={{this.handleClick}}
>
  Click me
</PlumaButton>

Source:

<button class="fly-btn fly-btn--sm">
  Click me
</button>

Target:

<PlumaButton
  @variant="secondary"
  @size="sm"
>
  Click me
</PlumaButton>