Skip to content

UI: use Text component for Badge typography #77295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 6 commits into from
Apr 14, 2026
Merged

UI: use Text component for Badge typography #77295

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bb82432
UI: use Text component for Badge typography
shrivastavanolo Apr 14, 2026
dd2ff5e
chore: add Badge Text component update to changelog
shrivastavanolo Apr 14, 2026
f577465
chore: trigger CI
shrivastavanolo Apr 14, 2026
dfbed04
refactor: simplify render by removing custom render prop
shrivastavanolo Apr 14, 2026
128219c
refactor: move variant after props spread to prevent overrides
shrivastavanolo Apr 14, 2026
385e37a
Merge branch 'trunk' into update/badge-text
ciampo Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
- `Dialog`, `AlertDialog`, `Tooltip`, `Select`: Add `container` prop to `Popup` for custom portal targets ([#77163](https://github.com/WordPress/gutenberg/pull/77163)).
- Add defensive styles against global WordPress stylesheets like common.css and forms.css ([#76783](https://github.com/WordPress/gutenberg/pull/76783)).
- `VisuallyHidden`: Improve Storybook stories and documentation for the `render` prop composition pattern.
- `Badge`: Use `Text` component for typography ([#77295](https://github.com/WordPress/gutenberg/pull/77295)).

@ciampo ciampo Apr 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can move this under internal, since there are effectively no changes for consumers of the package


### Internal

Expand Down
39 changes: 23 additions & 16 deletions packages/ui/src/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useRender, mergeProps } from '@base-ui/react';
import { mergeProps } from '@base-ui/react';
import clsx from 'clsx';
import { forwardRef } from '@wordpress/element';
import { type BadgeProps } from './types';
import styles from './style.module.css';
import { Text } from '../text';

/**
* A badge component for displaying labels with semantic intent.
Expand All @@ -11,19 +12,25 @@ export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(
{ children, intent = 'none', render, className, ...props },
ref
) {
const element = useRender( {
render,
defaultTagName: 'span',
ref,
props: mergeProps< 'span' >( props, {
className: clsx(
styles.badge,
styles[ `is-${ intent }-intent` ],
className
),
children,
} ),
} );

return element;
return (
<Text
variant="body-sm"
render={
render ?? (
<span
ref={ ref }
{ ...mergeProps( props, {
className: clsx(
styles.badge,
styles[ `is-${ intent }-intent` ],
className
),
} ) }
/>
Comment thread
ciampo marked this conversation as resolved.
Resolved
)
}
>
{ children }
</Text>
);
} );
4 changes: 0 additions & 4 deletions packages/ui/src/badge/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
padding-inline: var(--wpds-dimension-padding-sm);
padding-block: var(--wpds-dimension-padding-xs);
border-radius: var(--wpds-border-radius-lg);
font-family: var(--wpds-typography-font-family-body);
font-size: var(--wpds-typography-font-size-sm);
font-weight: var(--wpds-typography-font-weight-regular);
line-height: var(--wpds-typography-line-height-xs);
}

.is-high-intent {
Expand Down
Loading