diff --git a/.changeset/eighty-bananas-listen.md b/.changeset/eighty-bananas-listen.md
new file mode 100644
index 00000000000..0b11ed64dfa
--- /dev/null
+++ b/.changeset/eighty-bananas-listen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display free trial badge ``.
diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index 7ff5c9f690c..402f30b2c52 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -299,7 +299,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
// Verify the user is now shown as having an active free trial
// The pricing table should show their current plan as active
- await u.po.pricingTable.waitToBeActive({ planSlug: 'trial' });
+ await u.po.pricingTable.waitToBeFreeTrial({ planSlug: 'trial' });
await u.po.page.goToRelative('/user');
await u.po.userProfile.waitForMounted();
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 01609a95725..5e623e6c69a 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -184,7 +184,11 @@ function Card(props: CardProps) {
isCompact={isCompact}
planPeriod={planPeriod}
setPlanPeriod={setPlanPeriod}
- badge={showStatusRow ? : undefined}
+ badge={
+ showStatusRow ? (
+
+ ) : undefined
+ }
/>
{
return locators.badge(planSlug).getByText('Active').waitFor({ state: 'visible' });
},
+ waitToBeFreeTrial: async ({ planSlug }: { planSlug: string }) => {
+ return locators.badge(planSlug).getByText('Free trial').waitFor({ state: 'visible' });
+ },
getPlanCardCTA: ({ planSlug }: { planSlug: string }) => {
return locators.footer(planSlug).getByRole('button', {
name: /get|switch|subscribe/i,