Refactor button components in demo pages to use new Button styles for consistency

Author: gvreddy04

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor

@@ -1,11 +1,11 @@
 <LineChart @ref="lineChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()"> Add Data </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </button>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
+    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
+    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
+    <Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalLineChartAsync"> Horizontal Line Chart </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalLineChartAsync"> Vertical Line Chart </Button>
 </div>
 
 @code {

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor

@@ -1,9 +1,9 @@
 <LineChart @ref="lineChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </button>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToStart"> Alignment: start </Button>
+    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToCenter"> Alignment: center (default) </Button>
+    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToEnd"> Alignment: end </Button>
 </div>
 
 @code {
@@ -22,7 +22,7 @@
         lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
 
         // set ticks color
-        lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" };
+        lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[0] };
         lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] };
     }
 

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor

@@ -1,9 +1,9 @@
 <PieChart @ref="pieChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
+    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
+    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
 </div>
 
 @code {

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor

@@ -1,8 +1,8 @@
 <PieChart @ref="pieChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
+    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
 </div>
 
 @code {

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor

@@ -1,10 +1,10 @@
 <PieChart @ref="pieChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="PositionTopAsync"> Position: top </button>
-    <button class="btn btn-primary btn-sm" @onclick="PositionRightAsync"> Position: right </button>
-    <button class="btn btn-primary btn-sm" @onclick="PositionBottomAsync"> Position: bottom </button>
-    <button class="btn btn-primary btn-sm" @onclick="PositionLeftAsync"> Position: left </button>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="PositionTopAsync"> Position: top </Button>
+    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="PositionRightAsync"> Position: right </Button>
+    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="PositionBottomAsync"> Position: bottom </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="PositionLeftAsync"> Position: left </Button>
 </div>
 
 @code {