View Source SaladUI.Button (SaladUI v1.0.0-beta.1)

Button component for user interactions.

Provides a versatile button component with various styles, sizes, and states to handle user interactions throughout the application.

Summary

Functions

Renders a button with configurable styles and behaviors.

Functions

Renders a button with configurable styles and behaviors.

Attributes

  • :type - HTML button type attribute (e.g., "button", "submit")
  • :class - Additional CSS classes
  • :variant - Visual style variant of the button:
    • "default" - Primary action button
    • "secondary" - Secondary action button
    • "destructive" - Buttons for destructive actions
    • "outline" - Button with outline style
    • "ghost" - Button with minimal styling
    • "link" - Button that appears as a link
  • :size - Size of the button:
    • "default" - Standard size
    • "sm" - Small size
    • "lg" - Large size
    • "icon" - Square button optimized for icons
  • :rest - Additional HTML attributes including disabled, form, name, value

Examples

<.button>Send</.button>
<.button variant="destructive" phx-click="delete">Delete</.button>
<.button variant="outline" size="sm">Cancel</.button>
<.button variant="ghost" size="icon">
  <.icon name="hero-x-mark" />
</.button>
<.button type="submit" phx-disable-with="Saving...">Save Changes</.button>

Attributes

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

Slots

  • inner_block (required)