SigmaKit.Components.Buttons (sigma_kit v0.0.1)
Summary
Functions
Renders a simple button component.
Renders a dropdown button with a customizable label and a list of actions.
Renders a toggle switch with icons on the left and right sides.
Functions
Renders a simple button component.
Attributes
:class
- Additional CSS classes to apply to the button. Defaults tonil
.:primary
- A boolean indicating if the button should use the primary style. Defaults tofalse
.:light
- A boolean indicating if the button should use the light style. Defaults tofalse
.:danger
- A boolean indicating if the button should use the danger style. Defaults tofalse
.:inline
- A boolean indicating if the button should use the inline style. Defaults tofalse
.:rest
- A map of additional global attributes (e.g.,disabled
,form
,name
,value
,type
) to apply to the button.
Slots
:inner_block
(required) - The content to render inside the button.
Styles
The button supports multiple styles based on the attributes provided:
:primary
: A blue button with a hover effect.:light
: A light gray button with a hover effect.:danger
: A red button for destructive actions.:inline
: A white button with a border and hover effects, suitable for inline usage.
Attributes
class
(:any
) - Defaults tonil
.primary
(:boolean
) - Defaults tofalse
.light
(:boolean
) - Defaults tofalse
.danger
(:boolean
) - Defaults tofalse
.inline
(:boolean
) - Defaults tofalse
.- Global attributes are accepted. Supports all globals plus:
["type", "disabled", "form", "name", "value"]
.
Slots
inner_block
(required)
Renders a dropdown button with a customizable label and a list of actions.
Attributes
:label
(string, optional): The label displayed on the dropdown button.:id
(string, required): A unique identifier for the dropdown component.
Slots
:action
: Defines the actions available in the dropdown menu. Each action can have the following attributes::label
(string, optional): The label for the action.:icon
(string, optional): The name of the icon to display next to the action.:event
(string, optional): The event triggered when the action is clicked.:target
(any, optional): The target for thephx-click
event.:value
(any, optional): The value passed with thephx-click
event.
Attributes
label
(:string
)id
(:string
) (required)
Slots
action
- Accepts attributes:label
(:string
)icon
(:string
)event
(:string
)target
(:any
)value
(:any
)
Renders a toggle switch with icons on the left and right sides.
Attributes
:left_icon
(string, required): The name of the icon to display on the left side of the toggle switch.:right_icon
(string, required): The name of the icon to display on the right side of the toggle switch.:event
(string, required): The event name triggered when the toggle switch is clicked.:target
(optional): The target for thephx-click
event.:left
(boolean, required): Determines if the toggle is in the "left" position.:right
(boolean, required): Determines if the toggle is in the "right" position.
Attributes
left_icon
(:string
) (required)right_icon
(:string
) (required)event
(:string
) (required)target
(:any
) - Defaults tonil
.left
(:boolean
) (required)right
(:boolean
) (required)