How to make a 'stateful' component?

Button.elm

--------------------- Button module

import Html exposing (..)
import Html.Events exposing (..)
import Signal exposing (..)

type ButtonEvent = Increment | NoOp
type alias ButtonState = {
  count: Int
}
type alias ButtonComponent = {
  state : ButtonState,
  mailbox : Mailbox ButtonEvent
}
initialButtonState : ButtonState
initialButtonState = { count = 0 }

buttonSignal' : ButtonComponent -> Signal ButtonComponent
buttonSignal' initialComponent =
  let update _ component =
      let state = component.state
      in {
        state = { state | count <- state.count + 1 },
        mailbox = component.mailbox
      }
  in foldp update initialComponent initialComponent.mailbox.signal

buttonSignal : () -> Signal ButtonComponent
buttonSignal _ =
  let initialComponent = {state = initialButtonState, mailbox = mailbox NoOp }
  in buttonSignal' initialComponent

toHtml : ButtonComponent -> Html
toHtml component = button [
    onClick component.mailbox.address Increment
  ] [
    text <| toString component.state.count
  ]

--------------------- Main

buttonSignal1 = buttonSignal ()
buttonSignal2 = buttonSignal ()

main = (\c1 c2 -> div [] [toHtml c1, toHtml c2]) <~ buttonSignal1 ~ buttonSignal2

paste to Try Elm