Document badge component (#286)

viamrobotics · Jul 27, 2023 · 429b06d · 429b06d
1 parent 25483eb
commit 429b06d
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/packages/core/src/lib/badge.svelte b/packages/core/src/lib/badge.svelte
@@ -1,12 +1,29 @@
+<!--
+  @component
+  
+  The badge is often used to display status information.
+
+  ```svelte
+  <Badge
+    variant='green'
+    label='Active'
+  />
+  ```
+-->
 <svelte:options immutable />
 
 <script lang="ts">
-type Variants = 'green' | 'orange' | 'red' | 'gray' | 'blue';
-
 import cx from 'classnames';
 
+/**
+ * The badge text.
+ */
 export let label = '';
-export let variant: Variants = 'gray';
+
+/**
+ * The color theme of the badge.
+ */
+export let variant: 'green' | 'orange' | 'red' | 'gray' | 'blue' = 'gray';
 </script>
 
 <small