diff --git a/.changeset/inline-message-optional-variant.md b/.changeset/inline-message-optional-variant.md
new file mode 100644
index 00000000000..23e7f1999fb
--- /dev/null
+++ b/.changeset/inline-message-optional-variant.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+InlineMessage: Make `variant` prop optional, defaulting to the standard foreground color with an info icon
diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css
index 0ddbea7498b..cff5c2839df 100644
--- a/packages/react/src/InlineMessage/InlineMessage.module.css
+++ b/packages/react/src/InlineMessage/InlineMessage.module.css
@@ -10,6 +10,8 @@
grid-template-columns: auto 1fr;
align-items: start;
+ --inline-message-fgColor: var(--fgColor-default);
+
&[data-size='small'] {
--inline-message-fontSize: var(--text-body-size-small);
--inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
diff --git a/packages/react/src/InlineMessage/InlineMessage.test.tsx b/packages/react/src/InlineMessage/InlineMessage.test.tsx
index 63b99ce825d..419544145e6 100644
--- a/packages/react/src/InlineMessage/InlineMessage.test.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.test.tsx
@@ -95,6 +95,18 @@ describe('InlineMessage', () => {
expect(screen.getByTestId('container')).toHaveAttribute('data-variant', 'warning')
})
+ it('should not set data-variant when variant is not provided', () => {
+ render(test)
+ expect(screen.getByTestId('container')).not.toHaveAttribute('data-variant')
+ })
+
+ it('should render InfoIcon when variant is not provided', () => {
+ const {container} = render(test without variant)
+ expect(screen.getByText('test without variant')).toBeInTheDocument()
+ const svg = container.querySelector('svg.octicon-info')
+ expect(svg).toBeInTheDocument()
+ })
+
it('should render leading visual', () => {
render(
<>
diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
index b1729bc83ef..e6a60528d89 100644
--- a/packages/react/src/InlineMessage/InlineMessage.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -1,4 +1,4 @@
-import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react'
+import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon, InfoIcon} from '@primer/octicons-react'
import {clsx} from 'clsx'
import type React from 'react'
import {isValidElementType} from 'react-is'
@@ -14,7 +14,7 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & {
/**
* Specify the type of the InlineMessage
*/
- variant: MessageVariant
+ variant?: MessageVariant
/**
* A custom leading visual (icon or other element) to display instead of the default variant icon.
@@ -52,9 +52,11 @@ export function InlineMessage({
} else {
icon = LeadingVisual
}
- } else {
+ } else if (variant) {
// Use default icon based on variant and size
icon = size === 'small' ? smallIcons[variant] : icons[variant]
+ } else {
+ icon =
}
return (
@@ -62,7 +64,7 @@ export function InlineMessage({
{...rest}
className={clsx(className, classes.InlineMessage)}
data-size={size}
- data-variant={variant}
+ data-variant={variant ?? undefined}
data-component="InlineMessage"
>
{icon}