État vide

Un espace blanc se lit comme un bug. Un état vide dit quel espace est vide, pourquoi, et quoi faire ensuite — et c’est le cas qu’on oublie le plus facilement, parce qu’en développement il y a toujours des données.

État vide de base

Pas encore de billets

Ajoutez un fichier Markdown dans src/posts et il apparaîtra ici.

empty({
  title: 'Pas encore de billets',
  description: 'Ajoutez un fichier Markdown dans src/posts et il apparaîtra ici.',
})

Avec une icône

L’icône est décorative — elle est marquée aria-hidden, puisque le titre dit déjà ce qui se passe.

Rien ici

Ce dossier ne contient aucune page.

empty({
  icon: icon('folder'),
  title: 'Rien ici',
  description: 'Ce dossier ne contient aucune page.',
})

Avec une action

Les enfants deviennent la rangée d’actions.

Aucun résultat pour « îlots »

Vérifiez l’orthographe, ou parcourez plutôt la documentation.

Parcourir la documentation

empty({
  icon: icon('search'),
  title: 'Aucun résultat pour « îlots »',
  description: 'Vérifiez l’orthographe, ou parcourez plutôt la documentation.',
},
  button({ href: '/fr/docs' }, 'Parcourir la documentation'),
  button({ variant: 'outline', color: 'neutral' }, 'Effacer la recherche'),
)

Dans une carte

Déploiements

Aucun déploiement

Poussez sur main et le premier build apparaîtra ici.

card(
  cardHeader({ title: 'Déploiements' }),
  cardBody(
    empty({
      title: 'Aucun déploiement',
      description: 'Poussez sur main et le premier build apparaîtra ici.',
    }, button({ size: 'sm' }, 'Connecter un dépôt')),
  ),
)

À la place d’un tableau

Remplacez le tableau par un état vide plutôt que de rendre un en-tête sans aucune ligne dessous.

Historique des builds

Aucun build enregistré

Les exécutions apparaissent ici dès que le site a été déployé au moins une fois.

return (() => {
  const rows = []

  return card(
    cardHeader({ title: 'Historique des builds' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Aucun build enregistré',
          description: 'Les exécutions apparaissent ici dès que le site a été déployé au moins une fois.',
        })),
  )
})()

Props

Prop	Type	Défaut	Description
`icon`	`Child`	—	Glyphe décoratif au-dessus du titre ; masqué aux lecteurs d’écran.
`title`	`Child`	—	Ce qui est vide, en quelques mots.
`description`	`Child`	—	Pourquoi c’est vide, ou quoi y faire.

Les enfants sont rendus comme rangée d’actions sous la description.