feat: skeleton, add badge variant

traefik · Dec 15, 2021 · eeca841 · eeca841
1 parent c3c8f38
commit eeca841
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/components/Skeleton/Skeleton.stories.tsx b/components/Skeleton/Skeleton.stories.tsx
@@ -34,6 +34,8 @@ export const Typographies: ComponentStory<typeof SkeletonForStory> = () => (
 
 export const Button: ComponentStory<typeof SkeletonForStory> = () => <Skeleton variant="button" />;
 
+export const Badge: ComponentStory<typeof SkeletonForStory> = () => <Skeleton variant="badge" />
+
 export const Customs: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex direction="column" gap={3}>
     <Skeleton variant="title" css={{ width: '30%' }} />

diff --git a/components/Skeleton/Skeleton.tsx b/components/Skeleton/Skeleton.tsx
@@ -69,6 +69,10 @@ export const Skeleton = styled('div', {
       heading: {
         height: '$3',
       },
+      badge: {
+        borderRadius: '$pill',
+        height: '$4',
+      },
       button: {
         borderRadius: '$1',
         height: '32px',