Pills

Pills can be used with the List or Card component to display a list of items with a label.

Pills can be used with the List or Card component to display a list of items with a label. They can be used to display information about an item like a badge.

API Reference

Props

Name	Type	Default	Description
pills*	string[]		The content of the pills.

Examples

Basic

import { Section, Header, List, Pills } from "@stagehq/ui";

export default function Extension() {
  return (
    <Section>
      <Header
        title="My projects"
        icon="CodeBracketSquareIcon"
      />
      /* You can display pills here */
      <Pills pills={["react.js", "vue.js", "angular.js"]} />
      <List>
        {projects.map((project) => (
          <List.Item
            type={project.type}
            title={project.title}
            additional={project.additional}
            subtitle={project.subtitle}
            count={project.count && { value: project.count?.value, icon: project.count?.icon }}
          />
        ))}
      </List>
    </Section>
  );
}