diff --git a/.changeset/polite-trees-wink.md b/.changeset/polite-trees-wink.md
new file mode 100644
index 00000000000..4f05f69061b
--- /dev/null
+++ b/.changeset/polite-trees-wink.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Update `BranchName` styles to match github.com
diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx
index 396a5df8949..d582ac16407 100644
--- a/docs/content/AnchoredOverlay.mdx
+++ b/docs/content/AnchoredOverlay.mdx
@@ -1,6 +1,8 @@
---
title: AnchoredOverlay
status: Alpha
+source: https://github.com/primer/react/blob/main/src/AnchoredOverlay/AnchoredOverlay.tsx
+storybook: https://primer.style/react/storybook?path=/story/generic-behaviors-anchoredoverlay--default-portal
---
An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
@@ -8,7 +10,7 @@ The overlay can be opened and navigated using keyboard or mouse.
See also [Overlay positioning](/Overlay#positioning).
-## Example
+## Examples
```jsx live
@@ -35,3 +37,121 @@ See also [Overlay positioning](/Overlay#positioning).
}}
```
+
+## Props
+
+
+
+
+
+
+ A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is
+ required.
+
+ }
+ />
+
+ An override to the internal renderAnchor ref that will be used to position the overlay.
+ When renderAnchor is
+ null, this can be used to make an anchor that is detached from
+ AnchoredOverlay
+ .
+
+ }
+ />
+
+
+
+ Partial<OverlayProps>
+
+ }
+ description={
+ <>
+ Props to be spread on the internal Overlay component.
+
+ }
+ />
+
+ Partial<FocusTrapHookSettings>
+
+ }
+ description={
+ <>
+ Settings to apply to the focus trap on the internal Overlay component.
+
+ }
+ />
+
+ Partial<FocusZoneHookSettings>
+
+ }
+ description={
+ <>
+ Settings to apply to the focus zone on the internal Overlay component.
+
+ }
+ />
+
+
+## Status
+
+
diff --git a/docs/content/Avatar.mdx b/docs/content/Avatar.mdx
index b9dba48397b..c0973ff1494 100644
--- a/docs/content/Avatar.mdx
+++ b/docs/content/Avatar.mdx
@@ -5,17 +5,19 @@ componentId: avatar
source: https://github.com/primer/react/blob/main/src/Avatar.tsx
---
-import {Avatar} from '@primer/components'
+import {Avatar, Box} from '@primer/components'
-```jsx live
-
+```js
+import {Avatar} from '@primer/components'
```
-## Props
+## Examples
-
+### Default
-## Examples
+```jsx live
+
+```
### Square
@@ -23,16 +25,29 @@ import {Avatar} from '@primer/components'
```
-### AvatarPair
+## Props
-```jsx live
-
-
-
-
-```
+### Avatar
+
+
+ {' '}
+
+
+
+
+
-## Component status
+## Status
+
+
+
+```
+
+## Props
+
+### AvatarPair
+
+
+
+
+
+
+## Status
+
+
diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx
index 6ccefd07990..dbe801a5334 100644
--- a/docs/content/AvatarStack.mdx
+++ b/docs/content/AvatarStack.mdx
@@ -7,7 +7,13 @@ source: https://github.com/primer/react/blob/main/src/AvatarStack.tsx
import {AvatarStack} from '@primer/components'
-### Default example
+```js
+import {AvatarStack} from '@primer/components'
+```
+
+## Examples
+
+### Default
```jsx live
@@ -31,12 +37,14 @@ import {AvatarStack} from '@primer/components'
## Props
-| Name | Type | Default | Description |
-| :--------- | :---------------- | :-----: | :----------------------------------- |
-| alignRight | Boolean | | Creates right aligned AvatarStack |
-| sx | SystemStyleObject | {} | Style to be applied to the component |
+### AvatarStack
+
+
+
+
+
-## Component status
+## Status
- Hello
-
+```js
+import {Box} from '@primer/components'
```
-## Props
-
-
-
-Box also accepts all [styled system props](https://styled-system.com/table/).
-
## Examples
### Border on all sides
@@ -75,7 +67,17 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
```
-## Component status
+## Props
+
+### Box
+
+
+
+
+
+Box also accepts all [styled system props](https://styled-system.com/table/).
+
+## Status
` tag by default with monospace font.
-
-```jsx live
-a_new_feature_branch
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| :--- | :---------------- | :-----: | :----------------------------------- |
-| as | String | `` | sets the HTML tag for the component |
-| href | String | | a URL to link the component to |
-| sx | SystemStyleObject | {} | Style to be applied to the component |
-
-## Component status
-
-
diff --git a/docs/content/BranchName.mdx b/docs/content/BranchName.mdx
new file mode 100644
index 00000000000..52cf1e4f633
--- /dev/null
+++ b/docs/content/BranchName.mdx
@@ -0,0 +1,52 @@
+---
+title: BranchName
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/BranchName.tsx
+---
+
+```js
+import {BranchName} from '@primer/components'
+```
+
+BranchName is a label-type component rendered as an `` tag by default with monospace font.
+
+## Examples
+
+```jsx live
+a_new_feature_branch
+```
+
+## Props
+
+### BranchName
+
+
+ MDN
+ }
+ />
+
+
+## Status
+
+
diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.mdx
similarity index 62%
rename from docs/content/Breadcrumbs.md
rename to docs/content/Breadcrumbs.mdx
index 17ab35fb985..4bfd4ece651 100644
--- a/docs/content/Breadcrumbs.md
+++ b/docs/content/Breadcrumbs.mdx
@@ -5,6 +5,10 @@ description: Use breadcrumbs to show navigational context on pages that are many
source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx
---
+```js
+import {Breadcrumbs} from '@primer/components'
+```
+
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
- Are many levels deep on a site
@@ -16,7 +20,7 @@ To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-ro
`as={NavLink}` and omit the `selected` prop.
This ensures that the NavLink gets `activeClassName='selected'`
-## Default example
+## Examples
```jsx live
@@ -32,22 +36,26 @@ This ensures that the NavLink gets `activeClassName='selected'`
### Breadcrumbs
-| Prop name | Type | Default | Description |
-| :-------- | :---------------- | :-----: | :----------------------------------- |
-| children | ReactNode | | The `Breadcrumbs.Item`s |
-| className | string | | |
-| sx | SystemStyleObject | `{}` | Style to be applied to the component |
+
+
+
+
### Breadcrumbs.Item
-| Prop name | Type | Default | Description |
-| :-------- | :---------------- | :-----: | :----------------------------------------------- |
-| as | string | `a` | Sets the HTML tag for the component |
-| href | string | | URL to be used for the Link |
-| selected | boolean | `false` | Used to style the link as selected or unselected |
-| sx | SystemStyleObject | `{}` | Style to be applied to the component |
+
+
+ MDN
+ }
+ />
+
-## Component status
+## Status
- {type}
+
+ {type}
+
{defaultValue}
diff --git a/src/BranchName.tsx b/src/BranchName.tsx
index 5c0e872eb6d..e38faefe5a2 100644
--- a/src/BranchName.tsx
+++ b/src/BranchName.tsx
@@ -8,9 +8,10 @@ const BranchName = styled.a`
padding: 2px 6px;
font-size: ${get('fontSizes.0')};
font-family: ${get('fonts.mono')};
- color: ${get('colors.fg.muted')};
+ color: ${get('colors.accent.fg')};
background-color: ${get('colors.accent.subtle')};
border-radius: ${get('radii.2')};
+ text-decoration: none;
${sx};
`
diff --git a/src/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/__tests__/__snapshots__/BranchName.test.tsx.snap
index 031c9fe2ec4..67046d28a4e 100644
--- a/src/__tests__/__snapshots__/BranchName.test.tsx.snap
+++ b/src/__tests__/__snapshots__/BranchName.test.tsx.snap
@@ -6,9 +6,11 @@ exports[`BranchName renders consistently 1`] = `
padding: 2px 6px;
font-size: 12px;
font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
- color: #57606a;
+ color: #0969da;
background-color: #ddf4ff;
border-radius: 6px;
+ -webkit-text-decoration: none;
+ text-decoration: none;
}