NoRedInk/noredink-ui/7.23.0

NOTE: the latest version is 35.9.3

Nri.Ui.Button.V10

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

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

Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url and have it open to an external site

{ method : String
, url : String
}
-> Attribute msg

Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url, and it's an HTTP request (Rails includes JS to make this use the given HTTP method)

{ track : msg
, url : String
}
-> Attribute msg

Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url. This should only take in messages that result in a Msg that triggers Analytics.trackAndRedirect. For buttons that trigger other effects on the page, please use Nri.Button.button instead.

{ track : msg
, url : String
}
-> Attribute msg

Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url and have it open to an external site.

Sizing

exactWidth : Int -> Attribute msg

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

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

A delete button (blue X)

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

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

Modules