NoRedInk/noredink-ui/7.25.0

NOTE: the latest version is 35.9.3

Nri.Ui.ClickableSvg.V1

Create a button or link

button : String -> Svg -> List (Attribute msg) -> Html msg
type 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

width : Px -> Attribute msg

Default width is 17px.

Note: changing this width will change the width of the icon. The button or link may be wider if you add a border or margin to it.

height : Px -> Attribute msg

Default height is 17px.

Note: changing this height will change the height of the icon. The button or link may be taller if you add a border or margin to it.

State

disabled : Bool -> Attribute msg

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.

css : List Style -> Attribute msg

Modules