working counter example using elm-ui

Counter.elm

-- Elm 0.19.0
-- mdgriffith/elm-ui 1.1.0
import Browser
import Html exposing (..)
import Html.Events exposing (..)
import Element exposing (..)
import Element.Input as Input
import Element.Border as Border
import Element.Font as Font

main =
  Browser.sandbox { init = init, update = update, view = view }

init =
  0

type Msg
  = Increment
  | Decrement
  | Reset


update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

    Reset ->
      0

view model =
  layout [] <| myLayout model

myLayout model =
  column [ centerX
         , centerY
         ] [ modelRow model
           , controlsRow
           ]

modelRow model =
  row [ centerX ] [ Element.text <| String.fromInt model ]

controlsRow =
  row [ spacing 5 ] [ decrementButton
                    , resetButton
                    , incrementButton
                    ]

buttonStyle =
  [ Border.solid
  , Border.width 1
  , Element.width (px 60)
  , Font.center
  ]

decrementButton =
  Input.button buttonStyle { onPress =  Just Decrement
                           , label = Element.text "-"
                           }

resetButton =
  Input.button buttonStyle { onPress =  Just Reset
                           , label = Element.text "reset"
                           }

incrementButton =
  Input.button buttonStyle { onPress =  Just Increment
                           , label = Element.text "+"
                           }