Notes for V11:
The next version of Button
should add a hideTextForMobile
helper.
This will require adding a selector for the text. We are not making this change in V10, as
adding a span around the text could potentially lead to regressions.
The next version of Button
should also remove delete
nriDescription
, testId
, and id
helpersmodal
helper, an alias for large
sizenotMobileCss
, mobileCss
, quizEngineMobileCss
hideIconForMobile
and hideIconFor
tertiary
stylesubmit
and opensModal
secondaryDanger
styledisabled
attribute with aria-disabled="true"
type="button"
css
helperbutton : String -> List (Attribute msg) -> Accessibility.Styled.Html msg
Button.button "My great button!"
[ Button.onClick ()
, Button.enabled
]
By default, the button is enabled, Medium sized, with primary colors, and an unbounded width.
link : String -> List (Attribute msg) -> Accessibility.Styled.Html msg
Button.link "My great link!"
[ Button.href "My href"
, Button.secondary
]
By default, the link is Medium sized, with primary colors, and an unbounded width.
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
toggleButtonPressed : Basics.Bool -> Attribute msg
Mark the button as a toggle button, and pass in its pressed state.
small : Attribute msg
medium : Attribute msg
large : Attribute msg
modal : Attribute msg
Alias for Button.large
exactWidth : Basics.Int -> Attribute msg
Define a size in px
for the button's total width.
boundedWidth : { min : Basics.Int, max : Basics.Int } -> Attribute msg
Make a button that is at least min
large, and which will grow with
its content up to max
. Both bounds are inclusive (min <= actual value <=
max
.)
unboundedWidth : Attribute msg
Leave the maxiumum width unbounded (there is a minimum width).
fillContainerWidth : Attribute msg
exactWidthForMobile : Basics.Int -> Attribute msg
For the mobile breakpoint, define a size in px
for the button's total width.
boundedWidthForMobile : { min : Basics.Int, max : Basics.Int } -> Attribute msg
For the mobile breakpoint, make a button that is at least min
large, and which will grow with
its content up to max
. Both bounds are inclusive (min <= actual value <=
max
.)
unboundedWidthForMobile : Attribute msg
For the mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).
fillContainerWidthForMobile : Attribute msg
exactWidthForQuizEngineMobile : Basics.Int -> Attribute msg
For the quiz engine mobile breakpoint, define a size in px
for the button's total width.
boundedWidthForQuizEngineMobile : { min : Basics.Int, max : Basics.Int } -> Attribute msg
For the quiz engine mobile breakpoint, make a button that is at least min
large, and which will grow with
its content up to max
. Both bounds are inclusive (min <= actual value <=
max
.)
unboundedWidthForQuizEngineMobile : Attribute msg
For the quiz engine mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).
fillContainerWidthForQuizEngineMobile : Attribute msg
exactWidthForNarrowMobile : Basics.Int -> Attribute msg
For the quiz engine mobile breakpoint, define a size in px
for the button's total width.
boundedWidthForNarrowMobile : { min : Basics.Int, max : Basics.Int } -> Attribute msg
For the quiz engine mobile breakpoint, make a button that is at least min
large, and which will grow with
its content up to max
. Both bounds are inclusive (min <= actual value <=
max
.)
unboundedWidthForNarrowMobile : Attribute msg
For the quiz engine mobile breakpoint, Leave the maxiumum width unbounded (there is a minimum width).
fillContainerWidthForNarrowMobile : Attribute msg
primary : Attribute msg
secondary : Attribute msg
tertiary : Attribute msg
danger : Attribute msg
dangerSecondary : Attribute msg
premium : Attribute msg
enabled : Attribute msg
unfulfilled : Attribute msg
Shows inactive styles.
disabled : 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.
error : Attribute msg
Shows error styling. If a button, this attribute will disable it.
loading : Attribute msg
Shows loading styling. If a button, this attribute will disable it.
success : Attribute msg
Shows success styling. If a button, this attribute will disable it.
icon : Nri.Ui.Svg.V1.Svg -> Attribute msg
rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg
hideIconForMobile : Attribute msg
Hide the left-side icon for the mobile breakpoint.
hideIconFor : Css.Media.MediaQuery -> Attribute msg
Hide the left-side icon for an arbitrary media query.
custom : List (Accessibility.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:
Button.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
mobileCss : List Css.Style -> Attribute msg
Equivalent to:
Button.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
quizEngineMobileCss : List Css.Style -> Attribute msg
Equivalent to:
Button.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
delete : { label : String, onClick : msg } -> Accessibility.Styled.Html msg
DEPRECATED: this should be removed in Button.V11.