Toolbar

[<ReactComponent>]
let ControlledToolbar () =
    let checkedValues, setCheckedValues = React.useState [ "alert", [| "on"; "off" |]]

    let AlertIcon = Fui.bundleIcon(bundleIcon.alertFilled, bundleIcon.alertRegular)
    let AlertOnIcon = Fui.bundleIcon(bundleIcon.alertOnFilled, bundleIcon.alertOnRegular)
    let AlertOffIcon = Fui.bundleIcon(bundleIcon.alertOffFilled, bundleIcon.alertOffRegular)

    Fui.toolbar [
        toolbar.checkedValues checkedValues
        toolbar.onCheckedValueChange (fun d -> setCheckedValues ([ d.name, d.checkedItems] |> List.append checkedValues))
        toolbar.children [
            Fui.toolbarToggleButton [
                toolbarToggleButton.ariaLabel "Alert"
                toolbarToggleButton.icon (AlertIcon [])
                toolbarToggleButton.name "alert"
                toolbarToggleButton.value "alert"
            ]
            Fui.toolbarToggleButton [
                toolbarToggleButton.ariaLabel "Alert On"
                toolbarToggleButton.icon (AlertOnIcon [])
                toolbarToggleButton.name "alert"
                toolbarToggleButton.value "on"
            ]
            Fui.toolbarToggleButton [
                toolbarToggleButton.ariaLabel "Alert Off"
                toolbarToggleButton.icon (AlertOffIcon [])
                toolbarToggleButton.name "alert"
                toolbarToggleButton.value "off"
            ]
        ]
    ]