LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button lui--button-tooltip-toggle" data-lui--button-tooltip-toggle-toggled-value="false" data-lui--button-tooltip-toggle-toggled-text-value="Toggled" data-lui--button-tooltip-toggle-untoggled-text-value="Untoggled">
  <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
    <div class="lui-tooltip__title">
      Untoggled
    </div>
  </div>
  <span class="lui-button__text" data-lui--button-target="text">
    Button
  </span>
</button>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
resolved_text_color = text_color || LooposUi::Colors.find("general-global-white")
render(LooposUi::Button.new(
  type: type, 
  size: size, 
  text: "Button",
  primary_color: primary_color, 
  hover_color: hover_color, 
  text_color: resolved_text_color,
  tag_options: {
    data: {
      controller: "lui--button-tooltip-toggle",
      "lui--button-tooltip-toggle-toggled-value": false,
      "lui--button-tooltip-toggle-toggled-text-value": "Toggled",
      "lui--button-tooltip-toggle-untoggled-text-value": "Untoggled",
    }
  }
  ))

No notes provided.

Param Description Input

—

—

Primary background color (hexadecimal)

Hover background color (hexadecimal)

Text color (hexadecimal)

Description

The Button component is a simple button that can be used to trigger actions or navigate to different parts of the application.

Arguments

Property Description Default Value
kind The kind of the button. Can be :app, :neutral, :success, or :danger. :app
app The application type. If kind is :app and app is not provided, it defaults to LooposUi.config.app_type. nil
text The text displayed on the button. nil
size The size of the button. Can be :default, :small, or :tiny. :default
type The type of the button. Can be :primary, :secondary, or :tertiary. :primary
href Decides the type of the button. If present, the button will be rendered as an anchor tag, otherwise as a button. nil
tag The wrapper HTML tag that should be used to create the button. Eg: button, a, label, etc. Default is button, unless you specify href button
tag_options Hash with additional options to be passed to the tag builder. {}
leading_icon The icon displayed before the text. If the string is an app name, the respective app icon will be rendered nil
icon The icon displayed before the text, alternative way to set leading_icon. nil
trailing_icon The icon displayed after the text. If the string is an app name, the respective app icon will be rendered nil
disabled Boolean value, controls whether the button/link is clickable. false
active Boolean value, controls whether the button/link is in an active state. true

When the kind is set to :app and the app property is not provided, it will default to LooposUi.config.app_type.

Color Customization

To customize button colors (primary color, hover color, border color, text color), use the ThemeContext component to wrap your buttons. This only works if button is of type primary:

<%= render LooposUi::ThemeContext.new(theme: {
  button: {
    primary_color: "apps-default-800-primary",
    hover_color: "apps-default-900-hover",
    border_color: "apps-default-800-primary",
    text_color: "general-global-white"
  }
}) do %>
  <%= render LooposUi::Button.new(text: "Custom Button") %>
<% end %>

icon, leading_icon, and trailing_icon should be a string with the FontAwesome icon class (for example, fa-regular fa-plus). You can also pass in just the icon name - if the passed in value does not contain fa-, it will be prepended with fa-regular fa-{VALUE}. This way you can just pass in plus for the same effect.

Presets

As most buttons will have the same kind, size, and type, there are some presets available to make it easier to create buttons. The presets are defined in the LooposUi::Button::Presets module.

Currently, the available presets are:

  • new:
  • delete:
  • back:
  • enable:
  • copy:
  • export:
  • validation:

All presets accept the same arguments as the Button component, but most only require the href property.

Slots

There are three slots available for the Button component: counter, leading_icon and trailing_icon. The first one adds a counter next to the button, while the other two add the respective icons. The last two can also be passed in as properties, which is the heavily recommended way of doing it.

JavaScript/Stimulus Controller

The Button component includes a Stimulus controller (lui--button) that provides dynamic functionality for updating button content and handling icon interactions.

Controller Targets

Target Description
text The text content span element within the button
leadingIcon The leading icon element (when using FontAwesome icons)

Controller Methods

Method Description
rotateLeadingIcon() Toggles a 180-degree rotation on the leading icon. Useful for expand/collapse buttons.

Dynamic Updates

The controller automatically watches for changes to specific data attributes and updates the button content accordingly:

  • data-text: Updates the button text content
  • data-leading-icon: Updates the leading icon class
  • data-tooltip-title: Updates the tooltip if it exists

Usage Examples

Dynamic Text Updates

<%= render LooposUi::Button.new(text: "Initial Text", icon: :chevron-down) %>
<script>
  // Update button text dynamically
  const button = document.querySelector('[data-controller="lui--button"]')
  button.dataset.text = "Updated Text"
</script>

Integration with Other Components

The button controller is often used in conjunction with other components. For example, in the Log component:

<%= render LooposUi::Button.new(
  text: "Show More",
  leading_icon: "fa-regular fa-chevron-down",
  data: {
    action: "click->log#showMore log:toggleExpand->lui--button#rotateLeadingIcon"
  }
) %>