How to put a Button in a div?

[maxkraft7]

Maybe I have missed it somewhere in the docs. But I haven't found any example where I have a normal Button within let's say a div-tag.

Usually it would look something like this in normal elm:

div [] [
  button [] [ text "My Button" ]
]

But how would I do it with this library? The function textButton doesn't even take a String as argument???

[Orasund]

This package is for mdgriffith/elm-ui. If you are using elm/html, then this package is not for you and I would recommend looking into aforemny/material-components-web-elm.

That said, if you just looking for a way to wrap a div around it, then Element.el from the elm-ui package is the way to go.

import Element
import Widget.Material as Material
import Widget

type Msg
  = PressedButton

Element.el []
 [ Widget.textButton (Material.textButton Material.defaultPalette)
    { text = "My Button"
    , onPress = Just PressedButton
    }
 ]

I hope I could help.

[maxkraft7]

Well it looks promising, but it doesn't quite work. If I put you example code arround a div like this

materialButton: Html Msg
materialButton =
    div [][
    Element.el []
     (Widget.textButton (Material.textButton Material.defaultPalette)
        { text = "My Button"
        , onPress = Just PressedButton
        })
     ]

I get the error

Type mismatch. 
Required: List (Html msg) 
Found: List (Element Msg) 

How would I convert Element to Html? My view has to return some kind of Html, not Element.

[Orasund]

That because Elm-ui uses Element whereas elm/html uses Html. You can convert Html to Element but not the other way around. Sidenote: Element.el will be converted into a div so no need to wrap another div around it.

If you're new to Elm-ui and want to learn it, you can watch the talk by the creation and then take a deep look into the documentation. Again, you can't use elm/html if you use Elm-ui.