A button component with variation forms
Opaque Button
element that can produce msg
messages
Opaque Position
custom type that has 2 variants
Left
, Right
An opaque Size
custom type that has 3 variants
Normal
, Large
, Small
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.
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.
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
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
toMarkup : Button msg -> Element msg
Given the custom type representation, renders as an Element msg
.