diff --git a/src/components/badge/bl-badge.stories.mdx b/src/components/badge/bl-badge.stories.mdx
index bf65bbb4..afb3dbc5 100644
--- a/src/components/badge/bl-badge.stories.mdx
+++ b/src/components/badge/bl-badge.stories.mdx
@@ -52,6 +52,8 @@ ${BadgeTemplate({ content:'In Progress', size:'large', ...args })}
 # Badge
 Badge component can be used for highlighting a status or labeling an item.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## Badge Variants
 There are no specific variants for the badge but we suggest using our color palette for badge colors. If you need else colors you can change color by using `--bl-badge-bg-color` and `--bl-badge-color` variables.
 You dont have to give style parameter you can change color by giving css class like this:
diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx
index 39ed1e2c..b7ccd4ef 100644
--- a/src/components/button/bl-button.stories.mdx
+++ b/src/components/button/bl-button.stories.mdx
@@ -85,6 +85,8 @@ ${SingleButtonTemplate({kind: 'text', ...args})}`;
 
 Buttons allow users to take actions, and make choices with a single tap.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ### Usage
 
 * A button should contain at least one text, icon or both (text + icon).
diff --git a/src/components/icon/bl-icon.stories.mdx b/src/components/icon/bl-icon.stories.mdx
index 6ea99ac0..94ae662c 100644
--- a/src/components/icon/bl-icon.stories.mdx
+++ b/src/components/icon/bl-icon.stories.mdx
@@ -71,7 +71,7 @@ export const AllIcons = (args) => html`<div
 
 Icon component is an **internal** component for using inside other Baklava components to show some decorative icons.
 
-*Inline styles in examples are only for demo purposes. Use regular CSS classes or tag selectors to set styles.*
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
 
 ## Showing Icons
 
diff --git a/src/components/input/bl-input.stories.mdx b/src/components/input/bl-input.stories.mdx
index c091d9e8..ea5e6155 100644
--- a/src/components/input/bl-input.stories.mdx
+++ b/src/components/input/bl-input.stories.mdx
@@ -99,6 +99,8 @@ export const LabelStylesTemplate = args => html`
 
 Input component is the component for taking text input from user.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## Basic Usage
 
 Currently, input component supports `text` and `number` types, which default is `text`.
diff --git a/src/components/progress-indicator/bl-progress-indicator.stories.mdx b/src/components/progress-indicator/bl-progress-indicator.stories.mdx
index 203bccf9..7e6b7d73 100644
--- a/src/components/progress-indicator/bl-progress-indicator.stories.mdx
+++ b/src/components/progress-indicator/bl-progress-indicator.stories.mdx
@@ -52,6 +52,7 @@ A progress indicator provides feedback about the duration and progression of a p
 
 Progress indicator component used for a long operation or a process that can take a considerable or unknown amount of time. It visually shows the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
 
 ## Basic Usage
 
diff --git a/src/components/tab-group/bl-tab-group.stories.mdx b/src/components/tab-group/bl-tab-group.stories.mdx
index 21715707..ad9ac96b 100644
--- a/src/components/tab-group/bl-tab-group.stories.mdx
+++ b/src/components/tab-group/bl-tab-group.stories.mdx
@@ -68,6 +68,8 @@ export const TabGroup = (args) => html`
 # Tab Group
 Tab groups organizes the content in a way that each of Tab groups displays a section at a time.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabGroup.bind({})}
diff --git a/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx b/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx
index 8fefd7e5..1decc0f8 100644
--- a/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx
+++ b/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx
@@ -28,6 +28,8 @@ export const TabGroup = (args) => html`
 # Tab Panel
 Tab panels are utilized inside tab groups to show tabbed content
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabGroup.bind({})}
diff --git a/src/components/tab-group/tab/bl-tab.stories.mdx b/src/components/tab-group/tab/bl-tab.stories.mdx
index 8f6af980..89af036f 100644
--- a/src/components/tab-group/tab/bl-tab.stories.mdx
+++ b/src/components/tab-group/tab/bl-tab.stories.mdx
@@ -58,6 +58,8 @@ export const SelectedDisabledTogetherTemplate = (args) => html`
 # Tab
 Within tab groups, tabs are used to represent and activate tab panels. A tab can be disabled by setting the disabled prop and can be selected by selected prop.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabsTemplate.bind({})}
diff --git a/src/components/tooltip/bl-tooltip.stories.mdx b/src/components/tooltip/bl-tooltip.stories.mdx
index 7a6f3c4b..98744a1c 100644
--- a/src/components/tooltip/bl-tooltip.stories.mdx
+++ b/src/components/tooltip/bl-tooltip.stories.mdx
@@ -47,6 +47,8 @@ export const PlacementTemplate = (args) => html`
 
 Tooltips display informative text when users hover over an element.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## Basic Usage
 
 Tooltip can be used with any trigger such as button, icon, text, etc.