View Source LiveViewUI.UI.Button (LiveViewUI v0.0.7)
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, includingdisabled
,form
,name
, andvalue
.
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 tonil
.class
(:any
) - Defaults tonil
.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 tonil
.class
(:any
) - Defaults tonil
.as
(:string
) - Defaults to"button"
.- Global attributes are accepted. Supports all globals plus:
["disabled", "form", "name", "value"]
.
Slots
inner_block
(required)