Skip to content

InfoButton

Andrew Sutton edited this page Sep 17, 2023 · 3 revisions
[<ReactComponent>]
let InfoButtonTest() =
    let infobuttonInfoId = Fui.useId(Some "infobuton__info", None)
    let isOpen, setIsOpen = React.useState false

    Html.div [
        prop.ariaOwns (if isOpen then infobuttonInfoId else "")
        prop.children [
            Fui.label [
                label.size.large
                label.text "This is a large infoButton"
            ]
            Fui.infoButton [
                infoButton.size.large
                infoButton.info [
                    popoverSurface.id infobuttonInfoId
                    popoverSurface.text "This is example information for an InfoButton."
                ]
                infoButton.popover [
                    popover.onOpenChange (fun (d: OpenProp) -> setIsOpen d.``open``)
                ]
            ]
        ]
    ]
Clone this wiki locally