diff --git a/demo/src/pages/badge/mod.rs b/demo/src/pages/badge/mod.rs
index 1efa532..f6d67fc 100644
--- a/demo/src/pages/badge/mod.rs
+++ b/demo/src/pages/badge/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use thaw::*;
 use prisms::highlight_str;
+use thaw::*;
 
 #[component]
 pub fn BadgePage() -> impl IntoView {
@@ -11,16 +11,16 @@ pub fn BadgePage() -> impl IntoView {
             <h1>"Badge"</h1>
             <Demo>
                 <Space>
-                    <Badge value=value max_value=10>
+                    <Badge value=value max=10>
                         <Avatar/>
                     </Badge>
-                    <Badge color=BadgeColor::Success value=value max_value=10>
+                    <Badge variant=BadgeVariant::Success value=value max=10>
                         <Avatar/>
                     </Badge>
-                    <Badge color=BadgeColor::Warning value=value max_value=10>
+                    <Badge variant=BadgeVariant::Warning value=value max=10>
                         <Avatar/>
                     </Badge>
-                    <Badge color=BadgeColor::Warning dot=true>
+                    <Badge variant=BadgeVariant::Warning dot=true>
                         <Avatar/>
                     </Badge>
                     <Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
@@ -42,16 +42,16 @@ pub fn BadgePage() -> impl IntoView {
                     let value = create_rw_signal(0);
                     view! {
                         <Space>
-                            <Badge value=value max_value=10>
+                            <Badge value=value max=10>
                                 <Avatar />
                             </Badge>
-                            <Badge color=BadgeColor::Success value=value max_value=10>
+                            <Badge variant=BadgeVariant::Success value=value max=10>
                                 <Avatar />
                             </Badge>
-                            <Badge color=BadgeColor::Warning value=value max_value=10>
+                            <Badge variant=BadgeVariant::Warning value=value max=10>
                                 <Avatar />
                             </Badge>
-                            <Badge color=BadgeColor::Warning dot=true>
+                            <Badge variant=BadgeVariant::Warning dot=true>
                                 <Avatar />
                             </Badge>
                             <Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
@@ -68,6 +68,43 @@ pub fn BadgePage() -> impl IntoView {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Badge Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"MaybeSignal<u32>"</td>
+                        <td>"0"</td>
+                        <td>"Badge's value."</td>
+                    </tr>
+                    <tr>
+                        <td>"max"</td>
+                        <td>"MaybeSignal<u32>"</td>
+                        <td>"u32::MAX"</td>
+                        <td>"The maximum number of the badge when its value overflows."</td>
+                    </tr>
+                    <tr>
+                        <td>"variant"</td>
+                        <td>"MaybeSignal<BadgeVariant>"</td>
+                        <td>"BadgeVariant::"</td>
+                        <td>"Badge variant."</td>
+                    </tr>
+                    <tr>
+                        <td>"dot"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>"Show badge as dot."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
diff --git a/src/alert/mod.rs b/src/alert/mod.rs
index 78f5862..a699cec 100644
--- a/src/alert/mod.rs
+++ b/src/alert/mod.rs
@@ -13,21 +13,21 @@ pub enum AlertVariant {
 }
 
 impl AlertVariant {
-    pub fn theme_icon_color(&self, theme: &Theme) -> String {
+    fn theme_icon_color(&self, theme: &Theme) -> String {
         match self {
             AlertVariant::Success => theme.common.color_success.clone(),
             AlertVariant::Warning => theme.common.color_warning.clone(),
             AlertVariant::Error => theme.common.color_error.clone(),
         }
     }
-    pub fn theme_background_color(&self, theme: &Theme) -> String {
+    fn theme_background_color(&self, theme: &Theme) -> String {
         match self {
             AlertVariant::Success => theme.alert.success_background_color.clone(),
             AlertVariant::Warning => theme.alert.warning_background_color.clone(),
             AlertVariant::Error => theme.alert.error_background_color.clone(),
         }
     }
-    pub fn theme_border_color(&self, theme: &Theme) -> String {
+    fn theme_border_color(&self, theme: &Theme) -> String {
         match self {
             AlertVariant::Success => theme.alert.success_border_color.clone(),
             AlertVariant::Warning => theme.alert.warning_border_color.clone(),
diff --git a/src/badge/mod.rs b/src/badge/mod.rs
index a5aa6e9..3c100cf 100644
--- a/src/badge/mod.rs
+++ b/src/badge/mod.rs
@@ -2,19 +2,19 @@ use crate::{theme::use_theme, utils::mount_style, Theme};
 use leptos::*;
 
 #[derive(Default, Clone)]
-pub enum BadgeColor {
+pub enum BadgeVariant {
     Success,
     Warning,
     #[default]
     Error,
 }
 
-impl BadgeColor {
-    pub fn theme_color(&self, theme: &Theme) -> String {
+impl BadgeVariant {
+    fn theme_color(&self, theme: &Theme) -> String {
         match self {
-            BadgeColor::Success => theme.common.color_success.clone(),
-            BadgeColor::Warning => theme.common.color_warning.clone(),
-            BadgeColor::Error => theme.common.color_error.clone(),
+            BadgeVariant::Success => theme.common.color_success.clone(),
+            BadgeVariant::Warning => theme.common.color_warning.clone(),
+            BadgeVariant::Error => theme.common.color_error.clone(),
         }
     }
 }
@@ -22,8 +22,8 @@ impl BadgeColor {
 #[component]
 pub fn Badge(
     #[prop(optional, into)] value: MaybeSignal<u32>,
-    #[prop(default = MaybeSignal::Static(u32::MAX), into)] max_value: MaybeSignal<u32>,
-    #[prop(optional, into)] color: MaybeSignal<BadgeColor>,
+    #[prop(default = MaybeSignal::Static(u32::MAX), into)] max: MaybeSignal<u32>,
+    #[prop(optional, into)] variant: MaybeSignal<BadgeVariant>,
     #[prop(optional, into)] dot: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
@@ -35,14 +35,14 @@ pub fn Badge(
         theme.with(|theme| {
             css_vars.push_str(&format!(
                 "--thaw-background-color: {};",
-                color.get().theme_color(theme)
+                variant.get().theme_color(theme)
             ));
         });
         css_vars
     });
     let value = create_memo(move |_| {
         let value = value.get();
-        let max_value = max_value.get();
+        let max_value = max.get();
         if value == 0 {
             String::new()
         } else if max_value < value {
diff --git a/src/tag/mod.rs b/src/tag/mod.rs
index 8cad970..38a3ce5 100644
--- a/src/tag/mod.rs
+++ b/src/tag/mod.rs
@@ -14,7 +14,7 @@ pub enum TagVariant {
 }
 
 impl TagVariant {
-    pub fn theme_font_color(&self, theme: &Theme) -> String {
+    fn theme_font_color(&self, theme: &Theme) -> String {
         match self {
             TagVariant::Default => theme.tag.default_font_color.clone(),
             TagVariant::Success => theme.common.color_success.clone(),
@@ -22,7 +22,7 @@ impl TagVariant {
             TagVariant::Error => theme.common.color_error.clone(),
         }
     }
-    pub fn theme_background_color(&self, theme: &Theme) -> String {
+    fn theme_background_color(&self, theme: &Theme) -> String {
         match self {
             TagVariant::Default => theme.tag.default_background_color.clone(),
             TagVariant::Success => theme.tag.success_background_color.clone(),
@@ -30,7 +30,7 @@ impl TagVariant {
             TagVariant::Error => theme.tag.error_background_color.clone(),
         }
     }
-    pub fn theme_border_color(&self, theme: &Theme) -> String {
+    fn theme_border_color(&self, theme: &Theme) -> String {
         match self {
             TagVariant::Default => theme.tag.default_border_color.clone(),
             TagVariant::Success => theme.tag.success_border_color.clone(),