NoRedInk/noredink-ui/14.6.0

NOTE: the latest version is 35.9.3

Nri.Ui.Button.V10

Patch changes:

  • uses ClickableAttributes
  • adds nriDescription, testId, and id helpers

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.

type Attribute msg
icon : Svg -> Attribute msg
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.

css : List Style -> Attribute msg
nriDescription : String -> Attribute msg
testId : String -> Attribute msg
id : String -> Attribute msg

Behavior

onClick : msg -> Attribute msg
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
{ method : String
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg

Sizing

exactWidth : Int -> Attribute msg

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

{ 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.)

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

Change the color scheme

Change the state (buttons only)

Shows inactive styles.

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

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

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

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

Commonly-used buttons

{ label : String
, onClick : msg
}
-> Html msg

DEPRECATED: this should be removed in Button.V11.

{ label : String
, onSelect : msg
, onDeselect : msg
, pressed : Bool
}
-> Html msg

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