Common NoRedInk buttons. For accessibility purposes, buttons that perform an
action on the current page should be HTML <button> elements and are created here
with *Button functions. Buttons that take the user to a new page should be
HTML <a> elements and are created here with *Link functions. Both versions
should be able to use the same CSS class in all cases.
There will generally be a *Button and *Link version of each button style.
(These will be created as they are needed.)
In general a button should never truncate or obscure its contents. This could make it difficult or impossible for a student or teacher to use the site, so in general choose buttons that grow to fit their contents. It is better to risk weird layout than to block users. Might this be a golden rule? Of course there may be exceptions, for example if button content is supplied by an end-user.
Width sizing behavior for buttons.
WidthExact Int defines a size in px for the button's total width, and
WidthUnbounded leaves the maxiumum width unbounded (there is a minimum width).
Styleguide-approved styles for your buttons!
Note on borderless buttons: A borderless button that performs an action on the current page This button is intended to look like a link. Only use a borderless button when the clickable text in question follows the same layout/margin/padding as a bordered button
Describes the state of a button. Has consequences for appearance and disabled attribute.
ButtonContent, often changes based on ButtonState. For example, a button in the "Success" state may have a different label than a button in the "Error" state
<button> ButtonsThe part of a button that remains constant through different button states
A delightful button which can trigger an effect when clicked!
This button will trigger the passed-in message if the button state is:
This button will be Disabled if the button state is:
Exactly the same as button but you can pass in a list of attributes
A delete button (blue X)
See ui/src/Page/Teach/Courses/Assignments/index.coffee You will need to hook this up to clipboard.js
Buttons can be toggled into a pressed state and back again.
<a> ButtonsLinks are clickable things with a url.
NOTE: Links do not support two-line labels.
Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url
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.
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
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)
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
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
This should only take in messages that result in tracking events. For buttons that trigger other effects on the page, please use Nri.Ui.Button.V2.button instead
Sizes for buttons and links that have button classes