Button - demos updated

Author: gvreddy04

BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Button/ButtonDocumentation.razor

@@ -12,17 +12,34 @@
 <DocsLink Href="@RouteConstants.Docs_Button_Documentation" />
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
+    <Block>
+        The <code>Button</code> component can be used like <b>link</b>, <b>button</b>, <b>submit button</b>, and <b>reset button</b>.
+    </Block>
     <Demo Type="typeof(Button_Demo_01_How_it_works)" Tabs="true" />
 </Section>
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Colors" PageUrl="@pageUrl" Link="colors">
+    <Block>
+        The <code>Button</code> component is available in a variety of colors.
+        You can use the <code>Color</code> parameter to set the color of the button.
+    </Block>
     <Demo Type="typeof(Button_Demo_02_Colors_A)" Tabs="true" />
     <Demo Type="typeof(Button_Demo_02_Colors_B)" Tabs="true" />
+    <Block>
+        Use <code>IsLightVersion</code> parameter to set the light version of the button with the <code>Color</code> parameter.
+    </Block>
     <Demo Type="typeof(Button_Demo_02_Colors_C_Light_Version)" Tabs="true" />
+    <Block>
+        Use <code>IsDarkVersion</code> parameter to set the dark version of the button with the <code>Color</code> parameter.
+    </Block>
     <Demo Type="typeof(Button_Demo_02_Colors_D_Dark_Version)" Tabs="true" />
 </Section>
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Sizes" PageUrl="@pageUrl" Link="sizes">
+    <Block>
+        The <code>Button</code> component is available in 4 sizes: Small, Normal, Medium, and Large.
+        Default value is <b>Normal</b>.
+    </Block>
     <Demo Type="typeof(Button_Demo_03_Sizes_A)" Tabs="true" />
     <Demo Type="typeof(Button_Demo_03_Sizes_B_Multiple_Buttons_Size_Small)" Tabs="true" />
     <Demo Type="typeof(Button_Demo_03_Sizes_C_Multiple_Buttons_Size_Medium)" Tabs="true" />
@@ -31,6 +48,10 @@
 </Section>
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Full width" PageUrl="@pageUrl" Link="full-width">
+    <Block>
+        Use <code>IsFullWidth</code> parameter to set the full width of the button.
+        The button will take the full width of its parent container.
+    </Block>
     <Demo Type="typeof(Button_Demo_04_Full_Width)" Tabs="true" />
 </Section>
 
@@ -45,10 +66,17 @@
 </Section>
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Loading" PageUrl="@pageUrl" Link="loading">
+    <Block>
+        The <code>Button</code> component can be used to show a loading state.
+        Set <code>IsLoading</code> parameter to <b>true</b> to show the loading state.
+    </Block>
     <Demo Type="typeof(Button_Demo_07_Loading)" Tabs="true" />
 </Section>
 
 <Section Class="p-0" Size="HeadingSize.H3" Name="Disabled" PageUrl="@pageUrl" Link="disabled">
+    <Block>
+        Set <code>IsDisabled</code> parameter to <b>true</b> to disable the button.
+    </Block>
     <Demo Type="typeof(Button_Demo_08_Disabled)" Tabs="true" />
 </Section>