diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx
index 9cb39f3ac..eac109c65 100644
--- a/src/docs/pages/AvatarPage.tsx
+++ b/src/docs/pages/AvatarPage.tsx
@@ -130,19 +130,22 @@ const AvatarPage: FC = () => {
),
},
{
- title: 'Placeholder',
+ title: 'Placeholder Initials',
code: (
),
},
{
- title: 'Placeholder Initials',
+ title: 'Placeholder Initials - Sizing',
code: (
-
-
+
),
},
diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
index f9c3372ed..38fc29571 100644
--- a/src/lib/components/Avatar/Avatar.spec.tsx
+++ b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -60,6 +60,15 @@ describe('Components / Avatar', () => {
expect(initialsPlaceholderText()).toHaveTextContent('RR');
});
+ it('should support explicit sizes with placeholder initials', () => {
+ render(
+
+
+ ,
+ );
+
+ expect(initialsPlaceholder()).toHaveClass('h-36 w-36');
+ });
it('should support border color with placeholder initials', () => {
render(
diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
index fae52498e..ea3334e41 100644
--- a/src/lib/components/Avatar/Avatar.tsx
+++ b/src/lib/components/Avatar/Avatar.tsx
@@ -124,6 +124,7 @@ const AvatarComponent: FC = ({
stacked && theme.root.stacked,
bordered && theme.root.bordered,
bordered && theme.root.color[color],
+ theme.root.size[size],
)}
data-testid="flowbite-avatar-initials-placeholder"
>
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index 52a7660f5..9b4bd7130 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -138,7 +138,7 @@ const theme: FlowbiteTheme = {
},
initials: {
text: 'font-medium text-gray-600 dark:text-gray-300',
- base: 'inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 dark:bg-gray-600',
+ base: 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600',
},
},
group: {