NoRedInk / noredink-ui / 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

As part of major release:

Patch changes:

Changes from V9:

Create a button or link

button : String -> List (Attribute msg) -> Accessibility.Styled.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) -> Accessibility.Styled.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 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 : Basics.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

modal : Attribute msg

Alias for Button.large

exactWidth : Basics.Int -> Attribute msg

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

boundedWidth : { min : Basics.Int, max : Basics.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 : Basics.Int -> Attribute msg

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

boundedWidthForMobile : { min : Basics.Int, max : Basics.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 : Basics.Int -> Attribute msg

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

boundedWidthForQuizEngineMobile : { min : Basics.Int, max : Basics.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 : Basics.Int -> Attribute msg

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

boundedWidthForNarrowMobile : { min : Basics.Int, max : Basics.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 : Nri.Ui.Svg.V1.Svg -> Attribute msg

rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg

hideIconForMobile : Attribute msg

Hide the left-side icon for the mobile breakpoint.

hideIconFor : Css.Media.MediaQuery -> Attribute msg

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

Customization

custom : List (Accessibility.Styled.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 Css.Style -> Attribute msg

notMobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

mobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

quizEngineMobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

Commonly-used buttons

delete : { label : String, onClick : msg } -> Accessibility.Styled.Html msg

DEPRECATED: this should be removed in Button.V11.