+
+ return (
+
+ {variant === 'primary' ? (
+ Component === 'a' ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )
+ ) : Component === 'a' ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )}
+
+ )
+ },
+)
+
+const Action = ActionBase as PolymorphicForwardRefComponent<'button', BlankslateActionProps>
+
+Action.displayName = 'Blankslate.Action'
+
+type BlankslatePrimaryActionProps = BlankslateActionElementProps
+
+const PrimaryAction = forwardRef(
+ (props: BlankslatePrimaryActionProps, forwardedRef: React.ForwardedRef) => {
+ return
+ },
+) as PolymorphicForwardRefComponent<'button', BlankslatePrimaryActionProps>
+
+PrimaryAction.displayName = 'Blankslate.PrimaryAction'
+
+type BlankslateSecondaryActionProps = BlankslateActionElementProps
+
+const SecondaryAction = forwardRef(
+ (props: BlankslateSecondaryActionProps, forwardedRef: React.ForwardedRef) => {
+ return
+ },
+) as PolymorphicForwardRefComponent<'button', BlankslateSecondaryActionProps>
+
+SecondaryAction.displayName = 'Blankslate.SecondaryAction'
+
+export {Blankslate, Visual, Heading, Description, Action, PrimaryAction, SecondaryAction}
export type {
BlankslateProps,
BlankslateVisualProps,
BlankslateHeadingProps,
BlankslateDescriptionProps,
+ BlankslateActionProps,
BlankslatePrimaryActionProps,
BlankslateSecondaryActionProps,
}
diff --git a/packages/react/src/Blankslate/Blankslate.types.test.tsx b/packages/react/src/Blankslate/Blankslate.types.test.tsx
new file mode 100644
index 00000000000..2d1b19b009c
--- /dev/null
+++ b/packages/react/src/Blankslate/Blankslate.types.test.tsx
@@ -0,0 +1,74 @@
+import {useRef} from 'react'
+import {Blankslate} from '../Blankslate'
+
+export function ActionAcceptsButtonProps() {
+ const buttonRef = useRef(null)
+
+ return (
+
+ {
+ buttonRef.current = event.currentTarget
+ }}
+ >
+ Action
+
+
+ )
+}
+
+export function ActionAcceptsLinkProps() {
+ const linkRef = useRef(null)
+
+ return (
+
+ {
+ linkRef.current = event.currentTarget
+ }}
+ >
+ Action
+
+
+ )
+}
+
+export function secondaryActionAcceptsButtonProps() {
+ return (
+
+ {}}>
+ Action
+
+
+ )
+}
+
+export function secondaryActionAcceptsLinkProps() {
+ return (
+
+ Action
+
+ )
+}
+
+export function actionShouldOnlyAcceptValidVariants() {
+ return (
+
+ {/* @ts-expect-error variant should be either primary or secondary */}
+ Action
+
+ )
+}
+
+export function actionShouldOnlyAcceptButtonOrAnchorElements() {
+ return (
+
+ {/* @ts-expect-error as prop should be button or anchor */}
+ Action
+
+ )
+}
diff --git a/packages/react/src/Blankslate/index.tsx b/packages/react/src/Blankslate/index.tsx
index 7adcb70ee54..441c49f689c 100644
--- a/packages/react/src/Blankslate/index.tsx
+++ b/packages/react/src/Blankslate/index.tsx
@@ -1,9 +1,10 @@
-import {Blankslate, Visual, Heading, Description, PrimaryAction, SecondaryAction} from './Blankslate'
+import {Blankslate, Visual, Heading, Description, Action, PrimaryAction, SecondaryAction} from './Blankslate'
import type {
BlankslateProps,
BlankslateVisualProps,
BlankslateHeadingProps,
BlankslateDescriptionProps,
+ BlankslateActionProps,
BlankslatePrimaryActionProps,
BlankslateSecondaryActionProps,
} from './Blankslate'
@@ -12,6 +13,7 @@ const BlankslateContainer = Object.assign(Blankslate, {
Visual,
Heading,
Description,
+ Action,
PrimaryAction,
SecondaryAction,
})
@@ -22,6 +24,7 @@ export type {
BlankslateVisualProps,
BlankslateHeadingProps,
BlankslateDescriptionProps,
+ BlankslateActionProps,
BlankslatePrimaryActionProps,
BlankslateSecondaryActionProps,
}
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 8f8eb151e14..394a848eccb 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -35,6 +35,14 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
"type BannerProps",
"BaseStyles",
"type BaseStylesProps",
+ "Blankslate",
+ "type BlankslateActionProps",
+ "type BlankslateDescriptionProps",
+ "type BlankslateHeadingProps",
+ "type BlankslatePrimaryActionProps",
+ "type BlankslateProps",
+ "type BlankslateSecondaryActionProps",
+ "type BlankslateVisualProps",
"BranchName",
"type BranchNameProps",
"Breadcrumb",
@@ -284,7 +292,13 @@ exports[`@primer/react/experimental > should not update exports without a semver
"AriaStatus",
"type AriaStatusProps",
"Blankslate",
+ "type BlankslateActionProps",
+ "type BlankslateDescriptionProps",
+ "type BlankslateHeadingProps",
+ "type BlankslatePrimaryActionProps",
"type BlankslateProps",
+ "type BlankslateSecondaryActionProps",
+ "type BlankslateVisualProps",
"ButtonBase",
"type ButtonBaseProps",
"Card",
diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts
index f8841fec548..65d98a4a1a5 100644
--- a/packages/react/src/experimental/index.ts
+++ b/packages/react/src/experimental/index.ts
@@ -9,7 +9,15 @@
'use client'
export {Blankslate} from '../Blankslate'
-export type {BlankslateProps} from '../Blankslate'
+export type {
+ BlankslateActionProps,
+ BlankslateDescriptionProps,
+ BlankslateHeadingProps,
+ BlankslatePrimaryActionProps,
+ BlankslateProps,
+ BlankslateSecondaryActionProps,
+ BlankslateVisualProps,
+} from '../Blankslate'
export {ButtonBase} from '../Button'
export type {ButtonBaseProps} from '../Button'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0c723ddcc2e..268422e7c15 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -81,6 +81,16 @@ export {default as AvatarStack} from './AvatarStack'
export type {AvatarStackProps} from './AvatarStack'
export {Banner} from './Banner'
export type {BannerProps} from './Banner'
+export {Blankslate} from './Blankslate'
+export type {
+ BlankslateActionProps,
+ BlankslateDescriptionProps,
+ BlankslateHeadingProps,
+ BlankslatePrimaryActionProps,
+ BlankslateProps,
+ BlankslateSecondaryActionProps,
+ BlankslateVisualProps,
+} from './Blankslate'
export {default as BranchName} from './BranchName'
export type {BranchNameProps} from './BranchName'