- adds `nriDescription`, `testId`, and `id` helpers
- adds `iconForMobile`, `iconForQuizEngineMobile`, `iconForNarrowMobile`
- adds `submit` and `opensModal`
- replaces the `disabled` attribute with `aria-disabled="true"`
- removes click handler from disabled buttons
- prevents default behavior for disabled submit buttons by setting `type="button"`
button : String -> Nri.Ui.Svg.V1.Svg -> List (Attribute msg) -> Html.Styled.Html msg
link : String -> Nri.Ui.Svg.V1.Svg -> List (Attribute msg) -> Html.Styled.Html msg
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
exactSize : Basics.Int -> Attribute msg
Set the size in px
for the element's width and height.
Equivalent to:
[ exactWidth inPx
, exactHeight inPx
]
exactWidth : Basics.Int -> Attribute msg
Define a size in px
for the element's total width.
exactHeight : Basics.Int -> Attribute msg
Define a size in px
for the element's total height.
disabled : Basics.Bool -> Attribute msg
rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg
iconForMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg
iconForQuizEngineMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg
iconForNarrowMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg
withBorder : Attribute msg
Display a border around the icon.
primary : Attribute msg
white/transparent icon on an azure background.
secondary : Attribute msg
This is the default: a blue icon on a transparent background, or a blue icon on a white/glacier icon with a blue border.
tertiary : Attribute msg
Used to de-emphasize elements when not hovered.
quaternary : Attribute msg
Used to de-emphasize elements when not hovered.
danger : Attribute msg
White/transparent icon on a red background.
dangerSecondary : Attribute msg
Red icon on a white/transparent background.
custom : List (Html.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 : List Css.Style -> Attribute msg
notMobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
mobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
quizEngineMobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
In practice, we don't use these sizes. Remove them!
small : Attribute msg
This is the default. This attribute will be removed in the next version of ClickableSvg!
medium : Attribute msg
This attribute will be removed in the next version of ClickableSvg!
large : Attribute msg
This attribute will be removed in the next version of ClickableSvg!