LgButton

LgButton est le composant bouton de Lagoon. Il gère les actions utilisateur (clic, raccourci clavier, commande), la navigation (URI / LgPageLink), la soumission de formulaire, les bulles d'aide, les politiques d'autorisation et plusieurs variantes de style et de taille.

<LgButton Text="Mon bouton" IconName="@IconNames.All.Check" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgAriaComponentBase → LgComponentBase
• Interfaces : ILgComponentPolicies, IActionComponent, ILgFocusableComponent
• Package NuGet : Lagoon.UI

Variantes spécialisées

LgButton sert de base à plusieurs composants prêts à l'emploi : LgCopyButton (copie dans le presse-papiers) et LgPasteButton (collage depuis le presse-papiers).

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Bouton simple

Utilisez Text pour afficher le libellé traduit du bouton. Si aucune taille n'est précisée, la taille en cascade est utilisée, puis ButtonSize.Medium.

OrderListPage.razor

<LgButton Text="#Refresh" OnClick="RefreshAsync" />

OrderListPage.razor.cs

public partial class OrderListPage : LgPage
{
    // Recharge les données affichées : utile pour relancer une recherche après une action utilisateur explicite.
    private async Task RefreshAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#OrderListRefreshed");
    }
}

Style, taille, icône et bulle d'aide

Combinez Kind, ButtonSize, IconName et Tooltip pour adapter l'importance visuelle de l'action. Le raccourci clavier, s'il existe, est automatiquement ajouté à la bulle d'aide.

OrderActionsPage.razor

<LgButton Text="#ShowDetails"
          Kind="ButtonKind.Secondary"
          ButtonSize="ButtonSize.Small"
          IconName="@IconNames.All.InfoCircle"
          Tooltip="#ShowDetailsTooltip"
          TooltipPosition="TooltipPosition.Bottom"
          OnClick="ShowDetailsAsync" />

OrderActionsPage.razor.cs

public partial class OrderActionsPage : LgPage
{
    // Ouvre le détail de l'élément courant : action secondaire, donc stylée en bouton discret.
    private Task ShowDetailsAsync(ActionEventArgs args)
    {
        ShowInformation("#OrderDetailsOpened");
        return Task.CompletedTask;
    }
}

Désactivation et prévention du double-clic

Disabled neutralise le bouton immédiatement. PreventDoubleClick vaut true par défaut : pendant l'exécution d'une action asynchrone, le bouton est temporairement désactivé pour éviter deux traitements concurrents.

OrderSavePage.razor

<LgButton Text="#Save"
          IconName="@IconNames.Save"
          Disabled="@IsLocked"
          PreventDoubleClick="true"
          OnClick="SaveAsync" />

OrderSavePage.razor.cs

public partial class OrderSavePage : LgPage
{
    // Indique si l'écran est verrouillé, afin d'empêcher toute modification.
    private bool IsLocked { get; set; }

    // Persiste les modifications : le bouton reste inactif pendant l'attente pour éviter les doubles enregistrements.
    private async Task SaveAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#OrderSaved");
    }
}

Gestion du clic

L'événement OnClick expose un ActionEventArgs. Utilisez son CancellationToken pour propager l'annulation aux traitements longs déclenchés par le bouton.

OrderDeletePage.razor

<LgButton Text="#Delete"
          Kind="ButtonKind.Error"
          IconName="@IconNames.Delete"
          OnClick="DeleteAsync" />

OrderDeletePage.razor.cs

public partial class OrderDeletePage : LgPage
{
    // Supprime l'élément courant : le token permet d'arrêter proprement le traitement si l'action est annulée.
    private async Task DeleteAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#OrderDeleted");
    }
}

Navigation

Uri ouvre une route brute. Target permet d'ouvrir l'URI dans une autre fenêtre. Link reprend automatiquement le titre et l'icône d'un LgPageLink si Text ou IconName ne sont pas définis sur le bouton.

OrderNavigationPage.razor

@* Navigation interne. *@
<LgButton Text="#OpenOrders" Uri="orders" />

@* Ouverture dans une nouvelle fenêtre. *@
<LgButton Text="#OpenHelp" Uri="help/orders" Target="_blank" />

@* Navigation typée vers une page Lagoon. *@
<LgButton Link="@OrderEditPage.Link(CurrentOrderId)" />

OrderNavigationPage.razor.cs

public partial class OrderNavigationPage : LgPage
{
    // Identifiant transmis au lien typé pour éviter de reconstruire l'URL à la main.
    private int CurrentOrderId { get; set; } = 42;
}

Priorité de l'action

Si Uri ou Link fournit une URI, le clic navigue vers cette destination. N'ajoutez pas OnClick pour exécuter un traitement métier dans le même bouton : placez ce traitement dans la page cible ou utilisez un bouton sans URI.

Bouton de soumission d'un formulaire

Dans un LgEditForm, IsSubmit="true" rend le bouton en type="submit" et déclenche la soumission du formulaire parent.

OrderEditPage.razor

<LgEditForm Model="Model" OnValidSubmit="OnValidSubmitAsync">
    <LgButton Text="#Save" IconName="@IconNames.Save" IsSubmit="true" />
</LgEditForm>

OrderEditPage.razor.cs

public partial class OrderEditPage : LgPage
{
    // Modèle édité par le formulaire : il sert de contexte de validation et de sauvegarde.
    private OrderVm Model { get; } = new();

    // Déclenché uniquement lorsque le formulaire est valide : c'est l'endroit où persister le modèle.
    private async Task OnValidSubmitAsync(EditContext editContext)
    {
        await Task.Delay(100);
        ShowSuccess("#OrderSaved");
    }

    private sealed class OrderVm
    {
        public string Reference { get; set; }
    }
}

attention

IsSubmit="true" est incompatible avec ConfirmationMessage : le message de confirmation doit alors être porté par le LgEditForm, pas par le bouton (une InvalidOperationException est levée sinon).

Message de confirmation

ConfirmationMessage affiche une demande de confirmation avant d'exécuter l'action ou la navigation. Ne l'utilisez pas avec CommandName.

OrderDeleteConfirmPage.razor

<LgButton Text="#Delete"
          Kind="ButtonKind.Error"
          IconName="@IconNames.Delete"
          ConfirmationMessage="#ConfirmDeleteOrder"
          OnClick="DeleteAsync" />

OrderDeleteConfirmPage.razor.cs

public partial class OrderDeleteConfirmPage : LgPage
{
    // Exécuté uniquement après confirmation : protège les actions destructrices d'un clic involontaire.
    private async Task DeleteAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#OrderDeleted");
    }
}

Raccourci clavier

ShortcutKey associe une touche à Ctrl. Préfixez la touche par @ pour l'associer à Alt à la place.

OrderShortcutsPage.razor

@* Ctrl+S. *@
<LgButton Text="#Save" ShortcutKey="s" OnClick="SaveAsync" />

@* Alt+N. *@
<LgButton Text="#NewOrder" ShortcutKey="@@n" OnClick="CreateAsync" />

OrderShortcutsPage.razor.cs

public partial class OrderShortcutsPage : LgPage
{
    // Sauvegarde rapide : le raccourci évite de quitter le clavier pendant la saisie.
    private Task SaveAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderSaved");
        return Task.CompletedTask;
    }

    // Initialise une nouvelle fiche : utile pour les écrans de saisie répétitive.
    private Task CreateAsync(ActionEventArgs args)
    {
        ShowInformation("#OrderCreated");
        return Task.CompletedTask;
    }
}

Comportement de l'événement DOM

PreventDefault annule le comportement par défaut du clic et StopPropagation empêche le clic de remonter aux conteneurs parents. C'est utile dans une ligne ou un panneau lui-même cliquable.

OrderRowPage.razor

<LgButton Text="#Select"
          PreventDefault="true"
          StopPropagation="true"
          OnClick="SelectAsync" />

OrderRowPage.razor.cs

public partial class OrderRowPage : LgPage
{
    // Sélectionne uniquement l'action du bouton, sans déclencher le clic du conteneur parent.
    private Task SelectAsync(ActionEventArgs args)
    {
        ShowInformation("#OrderSelected");
        return Task.CompletedTask;
    }
}

Attributs additionnels, focus et accessibilité

Les attributs non reconnus sont transmis à l'élément rendu. Utilisez-les pour des attributs data-*, et renseignez AriaLabel lorsqu'un bouton est principalement identifié par son icône. AutoFocus donne le focus au premier rendu.

OrderRefreshPage.razor

<LgButton Text="#Refresh"
          IconName="@IconNames.Load"
          AutoFocus="true"
          AriaLabel="#RefreshOrders"
          data-testid="refresh-orders"
          OnClick="RefreshAsync" />

OrderRefreshPage.razor.cs

public partial class OrderRefreshPage : LgPage
{
    // Relance le chargement et reçoit le focus au premier affichage pour faciliter l'usage clavier.
    private Task RefreshAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderListRefreshed");
        return Task.CompletedTask;
    }
}

Commandes remontées au parent

CommandName et CommandArgument permettent de remonter une action à un parent qui écoute les commandes, par exemple une LgToolbar. La commande ne doit pas être combinée avec ConfirmationMessage.

OrderToolbarPage.razor

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgButton Text="#Archive"
              CommandName="archive"
              CommandArgument="@CurrentOrderId" />
    <LgButton Text="#Duplicate"
              CommandName="duplicate"
              CommandArgument="@CurrentOrderId" />
</LgToolbar>

OrderToolbarPage.razor.cs

public partial class OrderToolbarPage : LgPage
{
    // Identifiant transmis avec la commande pour que le parent sache quel élément traiter.
    private int CurrentOrderId { get; set; } = 42;

    // Centralise les actions de la barre : utile quand plusieurs boutons partagent le même flux de traitement.
    private Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        args.Handled = true;
        ShowInformation("#CommandReceived");
        return Task.CompletedTask;
    }
}

Visibilité et activation par policy

PolicyVisible masque le bouton si la policy n'est pas satisfaite. PolicyEdit le laisse visible mais non éditable si l'utilisateur n'a pas le droit d'agir.

AdminActionPage.razor

<LgButton Text="#Admin"
          PolicyVisible="@Policies.IsAdmin"
          PolicyEdit="@Policies.CanEdit"
          OnClick="OpenAdminAsync" />

AdminActionPage.razor.cs

public partial class AdminActionPage : LgPage
{
    // Ouvre l'action d'administration uniquement pour les utilisateurs autorisés par les policies.
    private Task OpenAdminAsync(ActionEventArgs args)
    {
        ShowInformation("#AdminOpened");
        return Task.CompletedTask;
    }
}

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgButton	Attributs HTML additionnels appliqués à l'élément rendu (capture des valeurs non mappées).
AutoFocus	bool	false	LgButton	Donne le focus au bouton lors du premier rendu.
ButtonSize	ButtonSize?	null	LgButton	Taille du bouton. Si non définie, la valeur en cascade est utilisée, sinon la taille par défaut.
ChildContent	RenderFragment	null	LgButton	Contenu personnalisé du bouton.
CommandArgument	object	null	LgButton	Argument associé à la commande envoyée au gestionnaire. Utilisez des types primitifs ou string pour optimiser le rendu.
CommandName	string	null	LgButton	Nom de la commande envoyée au gestionnaire de commandes parent (ICommandListener).
ConfirmationMessage	string	null	LgButton	Message de confirmation affiché avant l'action. Incompatible avec CommandName et IsSubmit.
CssClass	string	null	LgButton	Classes CSS additionnelles.
Disabled	bool	false	LgButton	Désactive le bouton.
IconName	string	null	LgButton	Icône affichée. S'utilise via IconName="@IconNames.All.MyIcon".
IsSubmit	bool	false	LgButton	Si true, le bouton est de type submit et déclenche le LgEditForm parent.
Kind	ButtonKind	ButtonKind.Primary	LgButton	Style / variante du bouton.
Link	LgPageLink	null	LgButton	Informations de lien vers une page. Le Text et l'IconName du lien sont repris s'ils ne sont pas définis.
OnClick	EventCallback<ActionEventArgs>	—	LgButton	Callback déclenché au clic sur le bouton.
PolicyEdit	string	null	LgButton	Policy requise pour activer (éditer) le bouton.
PolicyVisible	string	null	LgButton	Policy requise pour afficher le bouton.
PreventDefault	bool	false	LgButton	Annule le comportement par défaut de l'événement clic (@onclick:preventDefault).
PreventDoubleClick	bool	true	LgButton	Désactive le bouton pendant l'exécution de l'action pour empêcher le double-clic.
ShortcutKey	string	null	LgButton	Caractère du raccourci clavier. Associé à Ctrl, ou à Alt si préfixé par @.
StopPropagation	bool	true	LgButton	Stoppe la propagation de l'événement clic (@onclick:stopPropagation).
Target	string	null	LgButton	Nom de la fenêtre du navigateur dans laquelle ouvrir l'Uri.
Text	string	null	LgButton	Libellé du bouton.
Tooltip	string	null	LgButton	Bulle d'aide.
TooltipIsHtml	bool	false	LgButton	Indique si le contenu du Tooltip est au format HTML (sinon texte brut).
TooltipPosition	TooltipPosition	TooltipPosition.None	LgButton	Position de la bulle d'aide.
Uri	string	null	LgButton	URI / route à ouvrir au clic.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Paramètres en cascade

LgButton consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView), EditForm (LgEditForm parent, utilisé par IsSubmit) et ButtonSizeCascading (ButtonSize?, taille par défaut héritée d'un ancêtre).

Événements

Événement	Type	Description
OnClick	EventCallback<ActionEventArgs>	Déclenché lors du clic (ou du raccourci clavier). ActionEventArgs permet notamment d'annuler ou de suivre l'exécution de l'action.

Énumérations associées

ButtonKind

Style visuel du bouton (variantes Bootstrap).

Valeur	Description
Primary	Style principal (valeur par défaut).
Secondary	Style secondaire.
Success	Style « succès ».
Error	Style « erreur » (danger).
Warning	Style « avertissement ».
Info	Style « information ».
Link	Apparence de lien.
Ghost	Style « ghost » (fond transparent).
Custom	Style personnalisé (aucune classe de variante imposée).

ButtonSize

Valeur	Description
Medium	Taille standard (valeur par défaut).
Small	Taille réduite.
Large	Grande taille.

TooltipPosition

Valeur	Description
None	Position indéfinie (valeur par défaut).
Top	Au-dessus.
Right	À droite.
Bottom	En dessous.
Left	À gauche.

Accessibilité

• Renseignez AriaLabel (ou AriaLabelledBy) lorsque le bouton n'affiche qu'une icône, afin de fournir un libellé accessible.
• Le raccourci clavier configuré via ShortcutKey est automatiquement ajouté à la bulle d'aide.

Composants liés

• LgCopyButton — bouton de copie dans le presse-papiers.
• LgPasteButton — bouton de collage depuis le presse-papiers.
• LgLabelAction — libellé associé à un bouton d'action.