Actions.toggle
Server-rendered
Renders a shadcn-style toggle button.
Default toggle
<.toggle pressed={true}>Bold</.toggle>
Outline variant
<.toggle variant={:outline}>
<.icon name="italic" />
Italic
</.toggle>
Sizes
<div class="flex items-center gap-2">
<.toggle size={:sm}>S</.toggle>
<.toggle>Default</.toggle>
<.toggle size={:lg}>Large</.toggle>
</div>
Disabled toggle
<.toggle disabled>Disabled</.toggle>
LiveView navigation
<.toggle patch={~p"/items?filter=active"} pressed={@filter == :active} size={:sm}>
Active
</.toggle>
Attributes
| Name | Type | Default | Values | Global Includes |
|---|---|---|---|---|
class
|
:string |
— | — | — |
pressed
|
:boolean |
false
|
— | — |
rest
|
:global |
— | — |
type
,
id
,
name
,
value
,
disabled
,
aria-label
,
href
,
target
,
rel
,
navigate
,
patch
,
method
,
replace
,
csrf_token
|
size
|
:atom |
:default
|
:default
,
:sm
,
:lg
|
— |
variant
|
:atom |
:default
|
:default
,
:outline
|
— |
Slots
| Slot | Slot Attributes |
|---|---|
inner_block
Required
|
— |