[WIP] Getting the Label component to beta

docs/content/drafts/Label2.mdx

@@ -0,0 +1,159 @@
+---
+title: Label
+componentId: label2
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/Label2
+storybook: '/react/storybook?path=/story/label-label2--label'
+description: Use Label components to add contextual metadata to a design.
+---
+
+import {MarkGithubIcon} from '@primer/octicons-react'
+
+## Examples
+
+### Text-only
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+
+render(<Label>Default</Label>)
+```
+
+### Filled
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+
+render(<Label filled>Default</Label>)
+```
+
+### With a leading visual
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+
+render(<Label leadingVisual={MarkGithubIcon}>Default</Label>)
+```
+
+### Appearances
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+  <>
+    <Label>Default</Label>
+    <Label appearance="primary">Primary</Label>
+    <Label appearance="secondary">Secondary</Label>
+    <Label appearance="accent">Info</Label>
+    <Label appearance="success">Success</Label>
+    <Label appearance="attention">Warning</Label>
+    <Label appearance="severe">Severe</Label>
+    <Label appearance="danger">Danger</Label>
+    <Label appearance="done">Done</Label>
+    <Label appearance="sponsors">Sponsors</Label>
+  </>
+)
+```
+
+### Sizes
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+  <>
+    <Label size="sm">Small (default)</Label>
+    <Label size="md">Medium</Label>
+    <Label size="lg">Large</Label>
+  </>
+)
+```
+
+### StateLabel states
+
+```javascript live noinline
+// import {StateLabel} from '@primer/react/drafts'
+const {StateLabel} = drafts // ignore docs silliness; import like that ↑
+render(
+  <>
+    <StateLabel status="issueOpened">Issue opened</StateLabel>
+    <StateLabel status="issueClosed">Issue closed</StateLabel>
+    <StateLabel status="pullOpened">Opened</StateLabel>
+    <StateLabel status="pullClosed">Closed</StateLabel>
+    <StateLabel status="pullMerged">Merged</StateLabel>
+    <StateLabel status="draft">Draft</StateLabel>
+  </>
+)
+```
+
+## Props
+
+### Label
+
+<PropsTable>
+  <PropsTableRow
+    name="appearance"
+    type="'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'"
+    defaultValue="'default'"
+    description="The color of the label"
+  />
+  <PropsTableRow
+    name="size"
+    type="'sm' | 'md' | 'lg'"
+    defaultValue="'md'"
+    description="How large the label is rendered"
+  />
+  <PropsTableRow
+    name="filled"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the label should be styled with a solid background color"
+  />
+  <PropsTableRow
+    name="leadingVisual"
+    type="React.ComponentType<any>"
+    description="The icon component to be rendered before the the label's text"
+  />
+</PropsTable>
+
+### StateLabel
+
+<PropsTable>
+  <PropsTableRow
+    name="appearance"
+    type="'issueClosed' | 'pullClosed' | 'pullMerged' | 'issueOpened' | 'pullOpened' | 'draft'"
+    defaultValue="'default'"
+    description="Changes the visual design of the label to match the status that the label is communicating"
+  />
+  <PropsTableRow
+    name="size"
+    type="'sm' | 'md' | 'lg'"
+    defaultValue="'md'"
+    description="How large the label is rendered"
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>