View Source LiveViewUI.Button (LiveViewUI v0.0.6)

A simple button component for interactive actions.

Example Usage

Here is a basic example of setting up a button component:

<Button.root>
  Default Button
</Button.root>

You can customize the button with different variants, sizes, and HTML elements:

<Button.root variant="destructive" size="lg" as="a" class="extra-class">
  Destructive Button
</Button.root>

Attributes

  • :variant - The style variant of the button. Available options:
    • :default (default)
    • :destructive
    • :outline
    • :outline-secondary
    • :secondary
    • :ghost
    • :link
  • :size - The size of the button. Available options:
    • :default (default)
    • :sm
    • :lg
    • :icon
  • :type - The button type attribute (e.g., "button", "submit").
  • :class - Additional CSS classes to apply to the button.
  • :as - The HTML element to use for the button. Default is "button" or can be "a".
  • :rest - Any additional attributes to apply to the button's root element, including disabled, form, name, and value.

Slots

  • :inner_block - The content to be displayed inside the button.

Summary

Functions

Attributes

  • variant (:string) - Defaults to "default".
  • size (:string) - Defaults to "default".
  • type (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • as (:string) - Defaults to "button".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

Functions

Attributes

  • variant (:string) - Defaults to "default".
  • size (:string) - Defaults to "default".
  • type (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • as (:string) - Defaults to "button".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)