OUI.Button

A button creation API

type Button constraints msg

A button

type Type

= Elevated

| Filled

| Outlined

| Text

| SmallFAB

| MediumFAB

| LargeFAB

| ExtendedFAB

| FilledIcon

| OutlinedIcon

| Icon

A button type

type Action msg

= Disabled

| OnClick msg

| Link String

| NewTabLink String

| DownloadLink String

| DownloadAsLink String String

A button action

Constructor

new :

String

-> Button

{ needOnClickOrDisabled : ()

, hasNoIcon : ()

}

msg

Create a button with the given label

A text and an action (onClick, link or disabled) must be set before it can be rendered

The text is mandatory for icon buttons too and will be used as a 'aria-label' property.

By default, the button is of the 'Elevated' type, and its color is 'Primary'

Basic properties

withIcon :

Icon

-> Button { a | hasNoIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button icon

Can only be called once

color : Color -> Button a msg -> Button a msg

Set the button primary color

Actions

A button must have one and only one action that can be set with one of the following functions.

onClick :

msg

-> Button { a | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

Set the button 'onClick' handler

disabled :

Button { props | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

Set the button as 'disabled'

Links

Instead of a direct action (or disabled), a button can be a link

link :

String

-> Button { props | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

Set the button as a link to the given URL

newTabLink :

String

-> Button { props | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

Set the button as a link opening in a new tab

downloadLink :

String

-> Button { props | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

A link to download a file

downloadAsLink :

String

-> String

-> Button { props | needOnClickOrDisabled : () } msg

-> Button { a | hasAction : () } msg

A link to download a file, but you can specify the filename.

Button types

elevatedButton : Button a msg -> Button a msg

Set the button type to 'Elevated' (default)

filledButton : Button a msg -> Button a msg

Set the button type to 'Filled'

outlinedButton : Button a msg -> Button a msg

Set the button type to 'Outlined'

textButton : Button a msg -> Button a msg

Set the button type to 'TextButton'

smallFAB :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'SmallFAB'

mediumFAB :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'MediumFAB'

largeFAB :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'LargeFAB'

extendedFAB : Button a msg -> Button a msg

Set the button type to 'ExtendedFAB'

iconButton :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'IconButton'

filledIconButton :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'FilledIconButton'

outlinedIconButton :

Button { a | hasIcon : () } msg

-> Button { a | hasIcon : () } msg

Set the button type to 'OutlinedIconButton'

Internal

getText : Button c msg -> String

get the button text

getIcon : Button c msg -> Maybe Icon

get the button icon

getAction : Button c msg -> Action msg

get the button action

getColor : Button c msg -> Color

get the button color

getType : Button c msg -> Type

get the button type

orus-io/elm-orus-ui/1.0.1

OUI.Button

Constructor

Basic properties

Actions

Links

Button types

Internal

Modules