The default, for the main action in a context.
Buttons start actions.
Mirrors Button from @digdir/designsystemet-react.
Button.view [ Events.onClick Save ] [ Html.text "Lagre" ]
Button.view [ Button.secondary, Ds.color Color.danger, Events.onClick Delete ]
[ Html.text "Slett" ]Buttons default to type="button" so they never submit a form by accident.
Pass Attr.type_ "submit" for a submit button.
<Button> → Button.view []variant="secondary" → Button.secondaryloading → Button.loading Busy []icon + aria-label → Button.icon { label = "…", icon = … } []asChild + <a> → Button.viewAs Html.a [ Attr.href "…" ]command / commandfor → Dialog.showModal id, Popover.toggle id, …A button rendered as another element than <button> (React's asChild).
Button.viewAs Html.a [ Attr.href "/ny" ] [ Html.text "Ny sak" ]The default, for the main action in a context.
For actions next to a primary one.
For low-emphasis actions.
A button that can be busy. While busy it gets aria-busy="true" and a
spinner before its label.
Button.loading
(if model.saving then
Busy
else
Idle
)
[ Events.onClick Save ]
[ Html.text "Lagre" ]Prefer mapping your own state to Loading over an if:
Button.loading (Request.toLoading model.save) [ Events.onClick Save ] [ Html.text "Lagre" ]Whether a button is waiting for something.
BusyWith replaces the spinner with your own loader.
An icon-only button. The label is required and becomes the aria-label,
since screen readers can't read the icon.
Button.icon { label = "Lukk", icon = FeatherIcons.x |> FeatherIcons.toHtml [] }
[ Button.tertiary, Events.onClick Close ]An icon button that can be busy. While busy, the spinner takes the icon's place.
A
<button class="ds-button" type="button">.