Create a new Button component.

AvardaUi.Button.new
    { label = "Click me" }

Render the Button as HTML.

Always call this after you've built up the button with new and chained settings.

AvardaUi.Button.new {...}
    |> AvardaUi.Button.withIsRequired True
    |> AvardaUi.Select.view

Button type which can be used for type annotations when defining helpers in your code.

MsgType which can be used for type annotations when defining helpers in your code.

MsgType which can be used for type annotations when defining helpers in your code.

Style variants of the button. This is used with withVariant

Change button variant (Variant). Primary is set by default.

Add a left-side child element, preferably an icon.

Add a right-side child element, preferably an icon.

Disable the button. Visually dims and prevents user actions.

Change button sizing to large (default).

Change button sizing to medium.

Change button sizing to small.

Capitalize the label.

Explicitly set border-radius. This will override border-radius set in withBaseStyles.

Add additional base styles.

Overwrite hover styles.

Overwrite active styles.

Add additional attributes.

Transfer the <button> into <a> tag that looks like a button. You have to specify a url that will be passed into href attribute and additional attributes list, e.g. target or rel.

AvardaUi.Button.new { label = "Link" }
    |> AvardaUi.Button.withLink
        { url = "https://google.com"
        , attributes =
            [ Attributes.target "_blank"
            , Attributes.rel "noopener noreferrer"
            ]
        }
    |> AvardaUi.Button.view

<button> with onClick handler.

<button> with type = "submit". This the default button type.