Nri.Ui.Button.V10

Notes for V11:

The next version of Button should add a hideTextForMobile helper. This will require adding a selector for the text. We are not making this change in V10, as adding a span around the text could potentially lead to regressions. The next version of Button should also remove delete and toggleButton

Patch changes:

adds width helpers for Mobile breakpoint, Quiz Engine breakpoint, and Narrow Mobile breakpoint
uses ClickableAttributes
adds nriDescription, testId, and id helpers
adds modal helper, an alias for large size
adds notMobileCss, mobileCss, quizEngineMobileCss
adds hideIconForMobile and hideIconFor
support 'disabled' links according to Scott O'Hara's disabled links article
adds tertiary style
adds submit and opensModal
adds secondaryDanger style
marked toggleButton as deprecated and added toggleButtonPressed attribute

Changes from V9:

Explicitly zeroes out all margin
adds css helper

Create a button or link

button : String -> List (Attribute msg) -> Html msg

Button.button "My great button!"
    [ Button.onClick ()
    , Button.enabled
    ]

By default, the button is enabled, Medium sized, with primary colors, and an unbounded width.

link : String -> List (Attribute msg) -> Html msg

Button.link "My great link!"
    [ Button.href "My href"
    , Button.secondary
    ]

By default, the link is Medium sized, with primary colors, and an unbounded width.

type Attribute msg

Behavior

onClick : msg -> Attribute msg

submit : Attribute msg

By default, buttons have type "button". Use this attribute to change the button type to "submit".

Note: this attribute is not supported by links.

opensModal : Attribute msg

Use this attribute when interacting with the button will launch a modal.

href : String -> Attribute msg

linkSpa : String -> Attribute msg

Use this link for routing within a single page app.

This will make a normal <a> tag, but change the Events.onClick behavior to avoid reloading the page.

See https://github.com/elm-lang/html/issues/110 for details on this implementation.

linkExternal : String -> Attribute msg

linkWithMethod :

{ method : String

, url : String

}

-> Attribute msg

linkWithTracking :

{ track : msg

, url : String

}

-> Attribute msg

linkExternalWithTracking :

{ track : msg

, url : String

}

-> Attribute msg

toggleButtonPressed : Bool -> Attribute msg

Mark the button as a toggle button, and pass in its pressed state.

Sizing

small : Attribute msg

medium : Attribute msg

large : Attribute msg

exactWidth : Int -> Attribute msg

Define a size in px for the button's total width.

boundedWidth :

{ min : Int

, max : Int

}

-> Attribute msg

Make a button that is at least min large, and which will grow with its content up to max. Both bounds are inclusive (min <= actual value <= max.)

unboundedWidth : Attribute msg

Leave the maxiumum width unbounded (there is a minimum width).

fillContainerWidth : Attribute msg

exactWidthForMobile : Int -> Attribute msg

For the mobile breakpoint, define a size in px for the button's total width.

boundedWidthForMobile :

{ min : Int

, max : Int

}

-> Attribute msg

For the mobile breakpoint, make a button that is at least min large, and which will grow with its content up to max. Both bounds are inclusive (min <= actual value <= max.)

unboundedWidthForMobile : Attribute msg

For the mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).

fillContainerWidthForMobile : Attribute msg

exactWidthForQuizEngineMobile : Int -> Attribute msg

For the quiz engine mobile breakpoint, define a size in px for the button's total width.

boundedWidthForQuizEngineMobile :

{ min : Int

, max : Int

}

-> Attribute msg

For the quiz engine mobile breakpoint, make a button that is at least min large, and which will grow with its content up to max. Both bounds are inclusive (min <= actual value <= max.)

unboundedWidthForQuizEngineMobile : Attribute msg

For the quiz engine mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).

fillContainerWidthForQuizEngineMobile : Attribute msg

exactWidthForNarrowMobile : Int -> Attribute msg

For the quiz engine mobile breakpoint, define a size in px for the button's total width.

boundedWidthForNarrowMobile :

{ min : Int

, max : Int

}

-> Attribute msg

For the quiz engine mobile breakpoint, make a button that is at least min large, and which will grow with its content up to max. Both bounds are inclusive (min <= actual value <= max.)

unboundedWidthForNarrowMobile : Attribute msg

For the quiz engine mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).

fillContainerWidthForNarrowMobile : Attribute msg

Change the color scheme

primary : Attribute msg

secondary : Attribute msg

tertiary : Attribute msg

danger : Attribute msg

dangerSecondary : Attribute msg

premium : Attribute msg

Change the state (buttons only)

enabled : Attribute msg

unfulfilled : Attribute msg

Shows inactive styles.

disabled : Attribute msg

Shows inactive styling.

If a button, this attribute will disable it as you'd expect.

If a link, this attribute will follow the pattern laid out in Scott O'Hara's disabled links article, and essentially make the anchor a disabled placeholder.

Caveat!

The Component Catalog example will NOT work correctly because of https://github.com/elm/browser/issues/34, which describes a problem where "a tags without href generate a navigation event".

In most cases, if you're not using Browser.application, disabled links should work just fine.

error : Attribute msg

Shows error styling. If a button, this attribute will disable it.

loading : Attribute msg

Shows loading styling. If a button, this attribute will disable it.

success : Attribute msg

Shows success styling. If a button, this attribute will disable it.

Icons

icon : Svg -> Attribute msg

rightIcon : Svg -> Attribute msg

hideIconForMobile : Attribute msg

Hide the left-side icon for the mobile breakpoint.

hideIconFor : MediaQuery -> Attribute msg

Hide the left-side icon for an arbitrary media query.

Customization

custom : List (Attribute msg) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying Button styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

id : String -> Attribute msg

CSS

css : List Style -> Attribute msg

notMobileCss : List Style -> Attribute msg

Equivalent to:

Button.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Style -> Attribute msg

Equivalent to:

Button.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Style -> Attribute msg

Equivalent to:

Button.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

Commonly-used buttons

delete :

{ label : String

, onClick : msg

}

-> Html msg

DEPRECATED: this should be removed in Button.V11.

toggleButton :

{ label : String

, onSelect : msg

, onDeselect : msg

, pressed : Bool

}

-> Html msg

DEPRECATED - this helper will be removed in Button.V11. Use toggleButtonPressed attribute instead.

A button that can be toggled into a pressed state and back again.

NoRedInk/noredink-ui/24.2.0

Nri.Ui.Button.V10

Patch changes:

Changes from V9:

Create a button or link

Behavior

Sizing

Change the color scheme

Change the state (buttons only)

Icons

Customization

CSS

Commonly-used buttons

Modules