danielnarey/elm-modular-ui/1.1.0

NOTE: this package is not compatible with Elm 0.19.1

Ui.Button

Interactive Element: Button

In an Elm program, button clicks are handled by the program's update function. There are three button options in this module:

  • Ui.Button.action is just a generic button. Use it in your view whenever you want the update function to make something happen in the current view or issue a command in response to a click.
  • Use Ui.Button.navigation in specific cases where you want the update function to replace the current view with a new page view. (This is important mainly for accessibility, so that the semantic role of the button is correctly identified by its HTML tag, and it makes the most sense when your Elm program is set up to handle page navigation internally).
  • With Ui.Button.delete, the button appears as a cicle with a cross, which provides a compact control when you want the update function to hide an element, remove data from a record field, or otherwise "delete" something.
action : msg -> String -> Element msg

Construct an action button

"Click Here"
  |> Ui.Button.action DoSomething
  |> Ui.render


--> <button class="button">Click Here</button>
  • HTML tag: <button>
  • ARIA role: button (default)
  • Element class: .button
  • Available modifiers: color, size, style, state
  • Bulma CSS reference: http://bulma.io/documentation/elements/button/
delete : msg -> Element msg

Construct a delete button

Ui.Button.delete HideMessage
  |> Ui.render


--> <button class="delete"></button>
  • HTML tag: <button>
  • ARIA role: button (default)
  • Element class: .delete
  • Available modifiers: size
  • Bulma CSS reference: http://bulma.io/documentation/elements/delete/