Skip to main content

Button group

Join related buttons and menu triggers into one compact horizontal or vertical control group.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultButtonGroup =
    ButtonGroup.create "Message actions" [
        Button.create (ButtonContent.Text "Archive") |> ButtonGroupItem.button
        Button.create (ButtonContent.Text "Report") |> ButtonGroupItem.button ]
    |> ButtonGroup.render id

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add button-group --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultButtonGroup =
    ButtonGroup.create "Message actions" [
        Button.create (ButtonContent.Text "Archive") |> ButtonGroupItem.button
        Button.create (ButtonContent.Text "Report") |> ButtonGroupItem.button ]
    |> ButtonGroup.render id

Grouped actions

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let private moreActionsIcon =
    raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"><path d="M3.75 10a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0ZM8.75 10a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0ZM13.75 10a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z"/></svg>"""

let private backIcon =
    raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M11.53 4.47a.75.75 0 0 1 0 1.06L7.06 10l4.47 4.47a.75.75 0 1 1-1.06 1.06l-5-5a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>"""

let buttonGroupExample =
    let menu =
        DropdownMenu.create "button-group-snooze-menu" "More scheduling actions"
        |> DropdownMenu.withTrigger (DropdownMenuTrigger.icon moreActionsIcon |> DropdownMenuTrigger.withAttributes [ _ariaLabel "More scheduling actions" ])
        |> DropdownMenu.withContent [
            DropdownMenuItem.action "$snoozeUntil = 'tomorrow'" "Snooze until tomorrow"
            DropdownMenuItem.action "$snoozeUntil = 'next-week'" "Snooze until next week" ]
    div {
        _class "flex min-w-0 max-w-full flex-wrap items-center gap-2"
        ButtonGroup.create "Back" [
            Button.create (ButtonContent.Icon ("Back", backIcon)) |> ButtonGroupItem.button ]
        |> ButtonGroup.render id
        ButtonGroup.create "Message actions" [
            Button.create (ButtonContent.Text "Archive") |> ButtonGroupItem.button
            Button.create (ButtonContent.Text "Report") |> ButtonGroupItem.button ]
        |> ButtonGroup.render id
        ButtonGroup.create "Scheduling actions" [
            Button.create (ButtonContent.Text "Snooze") |> ButtonGroupItem.button
            menu |> ButtonGroupItem.menu ]
        |> ButtonGroup.render id
    }

Vertical orientation

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let verticalButtonGroup =
    ButtonGroup.create "Record view" [
        Button.create (ButtonContent.Text "Summary") |> ButtonGroupItem.button
        Button.create (ButtonContent.Text "Activity") |> ButtonGroupItem.button
        Button.create (ButtonContent.Text "Files") |> ButtonGroupItem.button ]
    |> ButtonGroup.withOrientation ButtonGroupOrientation.Vertical
    |> ButtonGroup.render id

API reference

type ButtonGroupOrientation =
    | Horizontal
    | Vertical

type ButtonGroupItem<'destination>

type ButtonGroupConfig<'destination>

module ButtonGroup =
    val create : label:string -> items:ButtonGroupItem<'a> list -> ButtonGroupConfig<'a>
    val withOrientation : orientation:ButtonGroupOrientation -> config:ButtonGroupConfig<'destination> -> ButtonGroupConfig<'destination>
    val withAttributes : attributes:HtmlAttribute list -> config:ButtonGroupConfig<'destination> -> ButtonGroupConfig<'destination>
    val render : resolve:('destination -> string) -> config:ButtonGroupConfig<'destination> -> HtmlElement

module ButtonGroupItem =
    val button : config:ButtonConfig -> ButtonGroupItem<'destination>
    val menu : config:DropdownMenuConfig<'destination> -> ButtonGroupItem<'destination>