Beacon.LiveAdmin.StationUI.HTML.Button (Beacon LiveAdmin v0.4.0)

View Source

The button component renders a <button> element with options for text-only, icon-only, or a combination of both.

Use the default slot to pass in text or large icons for buttons.

Buttons classes remain the same regardless of the button theme, but the value of variables applied to those classes will be scoped using a specifier or modifier class:

  • sui-primary
  • sui-secondary
  • sui-tertiary
  • sui-primary-destructive
  • sui-secondary-destructive

These classes are not utiltiy classes, as they are not actually applying or changing any CSS properties. The classes serve merely to scope the variables based on the theme of the button.

## Example

<.button> Button text <.icon name="hero-chevron-down" class="w-4 h-4 lg:w-5 lg:h-5" /> </.button>

Suggested size classes: xl: text-3xl lg:text-4xl lg: text-2xl lg:text-3xl sm: text-sm lg:text-base

Summary

Functions

Attributes

  • class (:string) - Defaults to "sui-primary".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "formaction", "formmethod", "name", "value"].

Slots

  • inner_block

Functions

button(assigns)

Attributes

  • class (:string) - Defaults to "sui-primary".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "formaction", "formmethod", "name", "value"].

Slots

  • inner_block