frandibar / elm-bootstrap / Bootstrap.Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations and sizes. You can also group a series of buttons together on a single line with the button group.

Buttons

button : List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Create a button

Button.button [ Button.primary ] [ text "Primary" ]

linkButton : List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Create a link that appears as a button

Button.linkButton [ Button.primary ] [ text "Primary" ]

radioButton : Basics.Bool -> List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Create a radio input that appears as a button

Button.radioButton True [ Button.primary ] [ text "Primary" ]

checkboxButton : Basics.Bool -> List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Create a checkbox input that appears as a button

Button.checkboxButton True [ Button.primary ] [ text "Primary" ]

submitButton : List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Shorthand to creae a button with type "submit"

Button.submitButton [ Button.primary ] [ text "Primary" ]

resetButton : List (Option msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

Shorthand to creae a button with type "reset"

Button.resetButton [ Button.primary ] [ text "Primary" ]

Button options

attrs : List (Html.Styled.Attribute msg) -> Option msg

When you need to customize a button element with standard Html.Attribute use this function to create it as a button option

onClick : msg -> Option msg

Option to fire a message when a button is clicked

disabled : Basics.Bool -> Option msg

Option to disable a button.


type alias Option msg =
Bootstrap.Internal.Button.Option msg

Opaque type reresenting available options for styling a button

Roled

primary : Option msg

Option to color a button to signal a primary action

secondary : Option msg

Option to color a button to signal a secondary action

success : Option msg

Option to indicate a successful or positive action

info : Option msg

Option to indicate a info action. Typically used for alerts.

warning : Option msg

Option to indicate an action that should be taken with caution

danger : Option msg

Option to indicate an action that is potentially negative or dangerous

light : Option msg

Option to create a light button

dark : Option msg

Option to create a dark button

roleLink : Option msg

Option to make a button look like a link element

Outlined

outlinePrimary : Option msg

Option to outline a button to signal a primary action

outlineSecondary : Option msg

Option to outline a button to signal a secondary action

outlineSuccess : Option msg

Option to outline an indicatation of a successful or positive action

outlineInfo : Option msg

Option to outline an info action. Typically used for alerts.

outlineWarning : Option msg

Option to outline an action that should be taken with caution

outlineDanger : Option msg

Option to outline an action that is potentially negative or dangerous

outlineLight : Option msg

Option to create a light outlined button

outlineDark : Option msg

Option to create a dark outlined button

Size

small : Option msg

Option to make a button small

large : Option msg

Option to make a button large

Block

block : Option msg

Option to create block level buttons—those that span the full width of a parent