> Empty State

Empty State

À utiliser quand une liste d'objet est vide

TagsuiInformationsFigmaExemples5StylesDisponibles

Default

Aucun élément pour l’instantAjoutez un premier élément pour commencer à travailler sur cette section.

export const Default = () => {
  return (
    <EmptyState
      title="Aucun élément pour l’instant"
      description="Ajoutez un premier élément pour commencer à travailler sur cette section."
    />
  );
};

WithIcon

Aucune donnéeAjoutez un élément pour remplir ce tableau.

export const WithIcon = () => {
  return (
    <EmptyState
      iconName="ClipboardList"
      title="Aucune donnée"
      description="Ajoutez un élément pour remplir ce tableau."
    />
  );
};

WithActions

Vous n’avez aucun documentCréez un premier document ou importez-en un depuis votre ordinateur.

export const WithActions = () => {
  return (
    <EmptyState
      iconName="FilePlus"
      title="Vous n’avez aucun document"
      description="Créez un premier document ou importez-en un depuis votre ordinateur."
      actions={
        <>
          <Button title="Créer un document" variant="primary" />
          <Button title="Importer un fichier" variant="secondary" />
        </>
      }
    />
  );
};

WithCustomChildren

Vous n’avez aucun item

export const WithCustomChildren = () => {
  return (
    <EmptyState iconName="File" description={'Vous n’avez aucun item'}>
      <Button title={'Button'} variant={'primary'} fullWidth />
      <Button title={'Secondary action link'} variant={'link'} />
    </EmptyState>
  );
};

WithFixHeight

Vous n’avez aucun item

export const WithFixHeight = () => {
  return (
    <EmptyState iconName="File" description={'Vous n’avez aucun item'} style={{ height: '600px' }}>
      <Button title={'Button'} variant={'primary'} />
      <Button title={'Secondary action link'} variant={'link'} />
    </EmptyState>
  );
};

Alveole UI Kit — v1.8.4