Current section
Files
Jump to
Current section
Files
src/ui/toggle_button.gleam
// MIT License
// Copyright (c) 2026 Koncreate
// See LICENSE for details
import gleam/string
import lustre/attribute.{type Attribute, attribute, class}
import lustre/element.{type Element}
import lustre/element/html
import ui/css
import ui/size as size_helpers
pub type Variant {
Default
Secondary
Outline
}
pub type Size {
Small
Medium
Large
}
pub fn toggle_button(
attributes: List(Attribute(a)),
children: List(Element(a)),
) -> Element(a) {
html.button(
[
class(
[
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
css.focus_ring(),
"h-10 px-4 py-2",
]
|> string.join(" "),
),
attribute("type", "button"),
attribute("aria-pressed", "false"),
..attributes
],
children,
)
}
pub fn variant(v: Variant) -> Attribute(a) {
case v {
Default -> class("bg-primary text-primary-foreground hover:bg-primary/90")
Secondary ->
class("bg-secondary text-secondary-foreground hover:bg-secondary/80")
Outline -> class("border border-input bg-background hover:bg-accent")
}
}
pub fn size(s: Size) -> Attribute(a) {
case s {
Small -> class(size_helpers.toggle_button_class(size_helpers.Small))
Medium -> class(size_helpers.toggle_button_class(size_helpers.Medium))
Large -> class(size_helpers.toggle_button_class(size_helpers.Large))
}
}
pub fn pressed(is_pressed: Bool) -> Attribute(a) {
case is_pressed {
True -> attribute("aria-pressed", "true")
False -> attribute("aria-pressed", "false")
}
}