diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index b533d5a0c675b..2457cd9e3139f 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -434,6 +434,14 @@ The style of the button (`ghost`, `outline`, `purple`, `gray`, `red`, `green`, `
 
 In JavaScript, set this property using the `buttonStyle` property to avoid conflict with the native `style` property.
 
+#### `button-border-radius`
+
+<p><Since v="4.8.0" /></p>
+
+The border radius of the button (`normal`, `rounded`). When using `rounded`, the button will have rounded corners and uniform padding on all sides.
+
+In JavaScript, set this property using the `buttonBorderRadius` property.
+
 ### `astro-dev-toolbar-badge`
 
 Shows a badge.
@@ -485,6 +493,20 @@ toggle.input.addEventListener('change', (evt) => {
 });
 ```
 
+### `astro-dev-toolbar-radio-checkbox`
+
+<p><Since v="4.8.0" /></p>
+
+Shows a radio checkbox. Similar to the `astro-dev-toolbar-toggle` component, this element is a simple wrapper around a native `<input type="radio">` element. The radio element can be accessed using the `input` property.
+
+```ts
+const radio = document.createElement('astro-dev-toolbar-radio-checkbox');
+
+radio.input.addEventListener('change', (evt) => {
+  console.log(`The radio is now ${evt.currentTarget.checked ? 'enabled' : 'disabled'}!`);
+});
+```
+
 #### `toggle-style`
 
 The style of the toggle (`purple`, `gray`, `red`, `green`, `yellow`, `blue`).