white/transparent icon on an azure background.
- adds `nriDescription`, `testId`, and `id` helpers
- adds `iconForMobile`, `iconForQuizEngineMobile`, `iconForNarrowMobile`
- adds `submit` and `opensModal`By default, buttons have type "button". Use this attribute to change the button type to "submit".
Note: this attribute is not supported by links.
Use this attribute when interacting with the button will launch a modal.
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.
Set the size in px for the element's width and height.
Equivalent to:
[ exactWidth inPx
, exactHeight inPx
]Define a size in px for the element's total width.
Define a size in px for the element's total height.
WARNING: Not implemented! This attribute is temporarily reverted due to https://github.com/NoRedInk/NoRedInk/pull/41952#issuecomment-1372393691.
Display a border around the icon.
This is the default: a blue icon on a transparent background, or a blue icon on a white/glacier icon with a blue border.
Used to de-emphasize elements when not hovered.
Red icon on a white/transparent background.
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.
Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]Equivalent to:
ClickableSvg.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]In practice, we don't use these sizes. Remove them!
This is the default. This attribute will be removed in the next version of ClickableSvg!