PackagesReroutesAboutlamdera.com

NoRedInk/noredink-ui/27.7.1

NOTE: the latest version is 35.9.3

READMEAboutVersionsSourceModules

Nri.Ui.ClickableText.V3

Notes for V4:

  • Remove the -v2- from dataDescriptor to avoid version specific
  • Use dataDescriptor for clickable-text-label
  • 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"

Post-release patches

  • uses ClickableAttributes
  • adds css helper
  • removes underline on hover and recolors to azureDark
  • removes bottom border
  • adds nriDescription, testId, and id helpers
  • adds modal helper, for use in modal footers, same as applying large and Css.marginTop (Css.px 15)
  • adds notMobileCss, mobileCss, quizEngineMobileCss
  • adds hideIconForMobile and hideIconAt
  • adds hideTextForMobile and hideTextAt
  • adds submit and opensModal
  • adds disabled
  • adds caption size that matches up with Text.caption's font size

Changes from V2

  • Changes API to be attributes-based rather than config-based
  • Makes a hole for custom attributes (like ids and styles)

About:

ClickableText looks different from Nri.Ui.Button in that it displays without margin or padding. ClickableText has the suave, traditional look of a "link"!

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.

<button> creators

button : String -> List (Attribute msg) -> Html msg

Creates a <button> element

<a> creators

Attributes

type Attribute msg

Sizing

This size setting corresponds to Text.caption's font size.

Appearance

Specifies whether it should have inline appearance.

Behavior

onClick : msg -> 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.

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 <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
{ method : String
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg
disabled : Bool -> Attribute msg

Shows inactive styling.

If a button, this attribute will disable it as you'd expect.

If a link, this attribute will follow the pattern laid out in Scott O'Hara's disabled links article, and essentially make the anchor a disabled placeholder.

Caveat!

The Component Catalog example will NOT work correctly because of https://github.com/elm/browser/issues/34, which describes a problem where "a tags without href generate a navigation event".

In most cases, if you're not using Browser.application, disabled links should work just fine.

Icons

icon : Svg -> Attribute msg

Hide the left-side icon for the mobile breakpoint.

hideIconFor : MediaQuery -> Attribute msg

Hide the left-side icon for an arbitrary media query.

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.

nriDescription : String -> Attribute msg
testId : String -> Attribute msg
id : String -> Attribute msg

CSS

hideTextFor : MediaQuery -> Attribute msg
css : List Style -> Attribute msg
notMobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
mobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
quizEngineMobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
rightIconCss : List Style -> Attribute msg

Specifies custom styles for the rightIcon

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera