betagouv / elm-dsfr / BetaGouv.DSFR.Button

Bouton

new : { onClick : Maybe msg, label : String } -> ButtonConfig msg

Crée un bouton

Button.new { onClick = Just Action, label = "action" }

view : ButtonConfig msg -> Accessibility.Html msg

Affiche un bouton

Button.new { onClick = Nothing, label = "Ajouter" }
    |> Button.linkButton "/add"
    |> Button.tertiaryNoOutline
    |> Button.withAttrs [ class "w-full" ]
    |> Button.leftIcon Icons.System.addLine
    |> Button.view

Groupe de boutons

group : List (ButtonConfig msg) -> GroupConfig msg

Crée un groupe de boutons

Par défaut les boutons sont de tailles moyennes et placés à la verticale.

[ Button.new ...]
    |> Button.group
    |> Button.inline
    |> Button.alignedRightInverted
    |> Button.viewGroup

viewGroup : GroupConfig msg -> Accessibility.Html msg

Affiche un groupe de boutons

Configuration des boutons


type alias ButtonConfig msg =
{ mandatory : { onClick : Maybe msg
, label : String }
, optional : OptionalButtonConfig msg 
}

Tailles de bouton

small : ButtonConfig msg -> ButtonConfig msg

medium : ButtonConfig msg -> ButtonConfig msg

large : ButtonConfig msg -> ButtonConfig msg

Types de bouton

disable : ButtonConfig msg -> ButtonConfig msg

linkButton : String -> ButtonConfig msg -> ButtonConfig msg

linkButtonExternal : String -> ButtonConfig msg -> ButtonConfig msg

regular : ButtonConfig msg -> ButtonConfig msg

reset : ButtonConfig msg -> ButtonConfig msg

submit : ButtonConfig msg -> ButtonConfig msg

Placement de l'icône

leftIcon : BetaGouv.DSFR.Icons.IconName -> ButtonConfig msg -> ButtonConfig msg

rightIcon : BetaGouv.DSFR.Icons.IconName -> ButtonConfig msg -> ButtonConfig msg

noIcon : ButtonConfig msg -> ButtonConfig msg

onlyIcon : BetaGouv.DSFR.Icons.IconName -> ButtonConfig msg -> ButtonConfig msg

Importance

close : ButtonConfig msg -> ButtonConfig msg

primary : ButtonConfig msg -> ButtonConfig msg

secondary : ButtonConfig msg -> ButtonConfig msg

tertiary : ButtonConfig msg -> ButtonConfig msg

tertiaryNoOutline : ButtonConfig msg -> ButtonConfig msg

Configuration des groupes de boutons

Taille des boutons du groupe

groupSmall : GroupConfig msg -> GroupConfig msg

Groupe de petits boutons

groupLarge : GroupConfig msg -> GroupConfig msg

Groupe de grands boutons

Placement des icônes des boutons du groupe

iconsLeft : GroupConfig msg -> GroupConfig msg

iconsRight : GroupConfig msg -> GroupConfig msg

Points de rupture

breakpointSM : Breakpoint

breakpointMD : Breakpoint

breakpointLG : Breakpoint

Placement des boutons dans le groupe

alignedCenter : GroupConfig msg -> GroupConfig msg

alignedRight : GroupConfig msg -> GroupConfig msg

alignedRightInverted : GroupConfig msg -> GroupConfig msg

Disposition des boutons dans le groupe

inline : GroupConfig msg -> GroupConfig msg

Applique le mode horizontal

inlineFrom : Breakpoint -> GroupConfig msg -> GroupConfig msg

Applique le mode horizontal à partir d'un certain point de rupture

Ajout de boutons au groupe

addAfter : ButtonConfig msg -> GroupConfig msg -> GroupConfig msg

Ajoute un bouton à la fin du groupe

addBefore : ButtonConfig msg -> GroupConfig msg -> GroupConfig msg

Ajoute un bouton au début du groupe

Personnalisation

withAttrs : List (Accessibility.Attribute msg) -> ButtonConfig msg -> ButtonConfig msg

withDisabled : Basics.Bool -> ButtonConfig msg -> ButtonConfig msg

withOptions : OptionalButtonConfig msg -> ButtonConfig msg -> ButtonConfig msg

Liste déroulante

dropdownSelector : { label : String, hint : Maybe String, id : String } -> List (Accessibility.Html msg) -> Accessibility.Html msg

Liste déroulante de boutons

Button.dropdownSelector { label = "Actions", hint = Just "indication", id = "id" }
    <| [ Button.new ... ]