Merge pull request #64 from tulup-conner/feature/avatar-alt-text

feat(component): Add `alt` attribute to `Avatar`s
themesberg · Apr 26, 2022 · d056bec · d056bec
2 parents 8d7cbd8 + b619076
commit d056bec
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -12,5 +12,6 @@ const Template: Story<AvatarProps> = (args) => <Avatar {...args} />;
 export const DefaultAvatar = Template.bind({});
 DefaultAvatar.storyName = 'Default';
 DefaultAvatar.args = {
+  alt: 'Your avatar',
   img: 'https://flowbite.com/docs/images/people/profile-picture-5.jpg',
 };
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -4,6 +4,7 @@ import { AvatarGroup } from './AvatarGroup';
 import { AvatarGroupCounter } from './AvatarGroupCounter';
 
 export type AvatarProps = PropsWithChildren<{
+  alt?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   rounded?: boolean;
   bordered?: boolean;
@@ -36,6 +37,7 @@ const statusPositionClasses: Record<AvatarProps['statusPosition'] & string, stri
 };
 
 const AvatarComponent: FC<AvatarProps> = ({
+  alt = '',
   img,
   status,
   children,
@@ -57,7 +59,7 @@ const AvatarComponent: FC<AvatarProps> = ({
               'p-1': bordered,
             })}
             src={img}
-            alt="Rounded avatar"
+            alt={alt}
           />
         ) : (
           <div

diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
@@ -121,6 +121,16 @@ const AvatarPage: FC = () => {
         </div>
       ),
     },
+    {
+      title: 'Alternative text',
+      code: (
+        <Avatar
+          alt="Default avatar with alt text"
+          img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+          rounded
+        />
+      ),
+    },
   ];
 
   return <DemoPage examples={examples} />;