Brickslab.Toolsv2.1.1

@brickslab./ui-web

Composant de feedback contextuel disponible en 4 variantes (info, success, warning, error). Contrôlé — le dismiss est géré par le parent via onDismiss. Supporte titre optionnel, icône, contenu riche et largeur complète.

Aperçu

4 variantes côte à côte

Mise à jour disponible pour votre application.
Enregistrement réussi. Vos données sont sauvegardées.
Espace disque faible — moins de 500 Mo disponibles.
Échec de la connexion. Vérifiez vos identifiants.

Avec titre

prop title — texte en gras au-dessus du message

Information

Une nouvelle version est disponible. Rechargez la page pour en profiter.

Opération réussie

Vos modifications ont bien été enregistrées.

Attention

Cette action est irréversible. Confirmez avant de continuer.

Erreur critique

La requête a échoué avec le code 500. Contactez le support.

Dismissible

dismissible + onDismiss — géré par useState dans le parent

Notification

Cliquez sur ✕ pour fermer cette alerte.

Sans icône

icon=false — retire l'icône de la variante

icon=true (défaut)
Avec icône — comportement par défaut.
icon=false
Sans icône — affichage épuré.

Full Width

fullWidth=true — s'étend sur toute la largeur du conteneur

Erreur de chargement

Impossible de récupérer les données. Vérifiez votre connexion et réessayez.

Contenu riche

children accepte du JSX — liens, strong, mise en forme

Conseil

Consultez la documentation pour en savoir plus sur cette fonctionnalité.
Attention : Cette opération supprimera définitivement toutes les données associées.

Props

PropTypeDéfautRequisDescription
childrenReact.ReactNode—✓Message principal affiché dans l'alerte.
variant"info" | "success" | "warning" | "error""info"—Variante visuelle de l'alerte — détermine couleur et icône.
titlestring——Titre optionnel affiché en gras au-dessus du message.
dismissiblebooleanfalse—Affiche un bouton ✕ pour fermer l'alerte.
onDismiss() => void——Callback appelé quand l'utilisateur clique sur ✕. Requis si dismissible=true.
iconbooleantrue—Affiche l'icône correspondant à la variante.
fullWidthbooleanfalse—Étire l'alerte sur toute la largeur disponible.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  children={<span>...</span>}
  variant="info"
  title="..."
  dismissible={false}
  onDismiss={...}
  icon={true}
  fullWidth={false}
/>
childrenvarianttitledismissibleonDismissiconfullWidth
Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    variant="info"
  />
</div>

Utilisation

tsx
import { Alert } from "@brickslab./ui-web";

// Variantes
<Alert variant="info">Mise à jour disponible.</Alert>
<Alert variant="success">Enregistrement réussi.</Alert>
<Alert variant="warning">Espace disque faible.</Alert>
<Alert variant="error">Échec de la connexion.</Alert>

// Avec titre
<Alert variant="success" title="Opération réussie">
  Vos modifications ont été enregistrées.
</Alert>

// Dismissible (contrôlé)
const [show, setShow] = useState(true);
{show && (
  <Alert variant="info" dismissible onDismiss={() => setShow(false)}>
    Cliquez ✕ pour fermer.
  </Alert>
)}

// Sans icône
<Alert variant="warning" icon={false}>
  Alerte sans icône.
</Alert>

// Full width
<Alert variant="error" fullWidth>
  Erreur critique sur toute la largeur.
</Alert>

// Contenu riche
<Alert variant="info" title="Conseil">
  Consultez la <a href="/docs">documentation</a> pour en savoir plus.
</Alert>