View Source SaladUI.Button (SaladUI v1.0.0-beta.3)
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 includingdisabled
,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 tonil
.class
(:any
) - Defaults tonil
.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)