lenards / elm-ui-patternfly / PF4.Button

A button component with variation forms

Definition


type Button msg

Opaque Button element that can produce msg messages


type Position

Opaque Position custom type that has 2 variants

Left, Right


type Size

An opaque Size custom type that has 3 variants

Normal, Large, Small


type Variant

Opaque Variant custom type that has 8 variants

Primary, Secondary, Tertiary, Warning, Danger, Plain (default), Control, Link.

There is a constructor function for each.

Note: the button constructs a Plain variant.

Constructor functions

button : { label : String, onPress : Maybe msg } -> Button msg

Configures a Button with default appearance

primary : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Primary variant

secondary : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Secondary variant

tertiary : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Tertiary variant

For designs that happen to have 3 overall button styles.

warning : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Warning variant

danger : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Danger variant

control : { label : String, onPress : Maybe msg } -> Button msg

Configures appearance of Button to be the Control variant

link : { label : String, onPress : Maybe msg, href : String } -> Button msg

Constructs a Link variant Button

Has additional required argument of href to be used for the hyperlink.

Configuration, sizing, functions

withDefaultSize : Button msg -> Button msg

Configures size to be Normal

Normal is the default value for button size.

withLargeSize : Button msg -> Button msg

Configures size to be Larger

withSmallSize : Button msg -> Button msg

Configures size to be Small

Icon functions

withIcon : Element msg -> Button msg -> Button msg

Configures the button to have an Icon

By default, the position is left of the text

withIconLeft : Button msg -> Button msg

Configure the position of the icon to be left of the text

withIconRight : Button msg -> Button msg

Configure the position of the icon to be right of the text

Rendering element

toMarkup : Button msg -> Element msg

Given the custom type representation, renders as an Element msg.