The Button msg type is used for describing the component for later rendering.

Toggle is a kind-of button that always contains a toggle-icon and visually looks like an embossed-primary button. The purpose of this button is to toggle between showing/hiding some spammed-content.

Button.toggle "Some Hint for Accessibility" TheTogglingMessage model.isSomethingVisible

This Button.disabled builds an embossed-looking, without-message, grayish-colored button. It's another approach for Button.withDisabledIf, helping when you can't compose a message for the desired action at the occasion.

case event of
    Just id ->
        Button.cmd (TriggerEvent id) Button.primary body


    Nothing ->
        Button.disabled body

This is the most common builder. It uses a simple message that is triggered on a click and renders as an embossed and themed button.

Button.fromLabel "Click this Button"
    |> Button.cmd SomeSimpleMessage Button.primary
    |> Button.renderElement renderConfig

Similar to Button.cmd, but instead of a message, it redirects to some path.

Button.fromLabel "Click this Link"
    |> Button.redirect "https://elm-lang.org/" Button.hyperlink
    |> Button.renderElement renderConfig

The ButtonBody is required when assembling the most-basic Button msg type. It indicates the contents inside of the desired button, like its label or icon.

Button.fromLabel initiates a button's body with text-content inside it.

Button.fromLabel "Click here"

Button.fromIcon initiates a button's body with icon-content inside it.

Button.fromIcon (Icon.map "Go to maps")

Button.fromLabeledOnLeftIcon initiates a button's body with icon-content and it's label on the left.

Button.fromLabeledOnLeftIcon (Icon.map "Go to maps")

Button.fromLabeledOnRightIcon initiates a button's body with icon-content and it's label on the right.

Button.fromLabeledOnRightIcon (Icon.map "Go to maps")

Non-toggle buttons must-be styled. The currently available styles are Hyperlink and Embossed.

A hyperlink-styled: See Button.hyperlink.

An embossed-styled button has paddings and hovering-effects. It's available through its sub-themes: Primary, Danger, Light, and Clear. These only change background and text color.

A hyperlink-styled button looks like classical web links: Blue with an underline.

The primary action's theme. This button usually commits the main task.

This is the danger-theme, and it's reddish for enforcing the user's attention.

This is the light-theme, mostly used for less-important actions.

This is the clear-theme, mostly used on icons where the background color isn't needed.

The switched on state for a button. Any active button can be in a a possible "On" state.

Describes a compatible width.

Button.withWidth changes the width of the button.

Button.withWidth Button.widthFull someButton

The button's width will fill its container.

The button will have the exact width to fit its contents.

NOTE: Default behaviour.

With Button.withSize, you'll be able to scale the button between the standard sizes.

The sizes (in height) are: Large - 60px; Medium - 48px; Small - 36px; Extra Small - 24px.

Button.withSize Size.large someButton

NOTE: Button's default size is Size.medium

After asserting some condition, Button.withDisabledIf will attempt to set the button to a visually-noticeable disabled state (a grayish button where the action can no longer be triggered).

Button.fromLabel "Send Someting"
    |> Button.cmd (QuerySend "Something") Button.primary
    |> Button.withDisabledIf (model.queryResult != QueryNotAsked)
    |> Button.renderElement renderConfig

NOTE: In case the button is a toggle or the condition resolves as False, nothing will happen.

With Button.withId, you can add an HTML ID attribute to the button element.

Button.withId (Just "id") someButton

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

Transform the messages produced by the component.