Update Button Overview

components/button/disabled-button.md

@@ -0,0 +1,35 @@
+---
+title: Disabled Button
+page_title: Disabled Button
+description: Learn how to configure a disabled Blazor Button component by Telerik UI.
+slug: button-disabled
+tags: telerik,blazor,disabled,button,
+published: True
+position: 5
+---
+
+# Disabled Button
+
+Sometimes specific buttons in an application must be temporarily disabled. To control the enabled state of the component, use the `Enabled` Boolean attribute.
+
+The following example demonstrates how to enable and disable the Button.
+
+>caption Toggle Telerik Button Enabled State
+
+````CSHTML
+<p>
+    <label>
+        <TelerikCheckBox @bind-Value="@ButtonIsEnabled" /> Toggle Button State
+    </label>
+</p>
+
+<TelerikButton Enabled="@ButtonIsEnabled">@ButtonText</TelerikButton>
+
+@code {
+    bool ButtonIsEnabled { get; set; } = false;
+    string ButtonText => ButtonIsEnabled ? "Enabled Button" : "Disabled Button";
+}
+
+>caption Comparison between disabled and enabled button
+
+![](images/disabled-button.png)

components/button/overview.md

@@ -1,7 +1,7 @@
 ---
 title: Overview
 page_title: Button Overview
-description: Overview of the Button for Blazor.
+description: Discover the Blazor Button and explore the examples.
 slug: components/button/overview
 tags: telerik,blazor,button,overview
 published: True
@@ -10,24 +10,19 @@ position: 0
 
 # Button Overview
 
-This article provides information about the <a href="https://www.telerik.com/blazor-ui/buttons" target="_blank">Blazor Button component</a> and its core features.
+This article introduces the <a href="https://www.telerik.com/blazor-ui/buttons" target="_blank">Blazor Button component</a>, shows how to start using it, and lists its core features.
 
-The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click [event]({%slug button-events%}) and [icons]({%slug button-icons%}). You can also disable the button and set its [type]({%slug button-type%}).
+Buttons convey user actions and can display text, images and HTML.
 
-#### In this article:
+The Blazor Button provides a variety of styling options through the [built-in themes]({%slug general-information/themes%}) and the [button type]({%slug button-type%}). It supports [font icons and images]({%slug button-icons%}) and fires click [events]({%slug button-events%}).
 
-* [Basic Button](#basic-button)
-* [Primary Button](#primary-button)
-* [Disabled State](#disabled-state)
-* [Styling](#styling)
+## Creating Blazor Button
 
+1. Use the `<TelerikButton>` tag to add the component to your razor page.
 
+1. Add an `OnClick` event handler to show the current date and time.
 
-## Basic Button
-
-To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
-
->caption Basic Telerik Button with OnClick event handling
+>caption Basic Blazor Button with OnClick event handler
 
 ````CSHTML
 @result
@@ -44,95 +39,58 @@ To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
 }
 ````
 
->caption The result from the code snippet above
 
-![](images/basic-button.png)
+## Icons
 
->caption Component namespace and reference
+To visually communicate the purpose of a button, you can add an image, sprite, or font icon. You can choose between a wide range of built-in font icons or use your custom font icons. [Read more about the Blazor Button icons...]({%slug button-icons%})
 
-````CSHTML
-@using Telerik.Blazor.Components
+## Type
 
-<TelerikButton @ref="theButton">Hello!</TelerikButton>
-
-@code{
-	Telerik.Blazor.Components.TelerikButton theButton;
-}
-````
+To control the submit behavior of the Blazor Button, use the `Type` attribute. Select from the following button types: `Submit`, `Reset`, and `Button`. [Read more about the Blazor Button Type...]({%slug button-type%})
 
-## Primary Button
-
-You can also make the button use a strong color to attact attention, called Primary button styling. To do that, set its `Primary` property to true.
-
->caption Button with the Primary color scheme from the current theme
-
-````CSHTML
-<TelerikButton Primary="true">Primary</TelerikButton>
-````
-
->caption The result from the code snippet above, with the Default theme
-
-![](images/primary-button.png)
+## Events
 
+The Blazor Button fires events that you can handle and respond to user actions. [Read more about the Blazor Button events...]({%slug button-events%}).
 
 ## Disabled State
 
-To disable a button, set its `Enabled` attribute to `false`.
-
->caption Disabled Telerik Button
-
-````CSHTML
-<TelerikButton Enabled="false">Disabled Button</TelerikButton>
-````
-
->caption Comparison between disabled and enabled button
-
-![](images/disabled-button.png)
+To prevent user interaction with a Button, disable it. [Read more about the disabled Blazor Button...]({%slug button-disabled%}).
 
 ## Styling
 
-You can style the button through its `Class` attribute to define your own CSS rules that apply to the HTML rendering.
+To customize the style and the appearance of the Blazor Button, you can use the [built-in themes]({%slug general-information/themes%}). Additionally, set the `Class` attribute and implement custom CSS rules. [Read more about the Blazor Button styling...]({%slug button-styling%})
 
->caption Set CSS class to the button and change its appearance
+## Button Reference
 
-````CSHTML
-<TelerikButton Class="RedText">My text is red.</TelerikButton>
-
-<style>
-	.RedText,
-	.RedText:hover {
-		color: red;
-	}
-</style>
-````
+Add a reference to the Button instance to use its methods (for example - `FocusAsync()`).
 
->caption The result from the code snippet above
+>caption Component namespace and reference
 
-![](images/red-button.png)
+````CSHTML
+<TelerikButton @ref="theButton">Hello!</TelerikButton>
 
+@code{
+    Telerik.Blazor.Components.TelerikButton theButton { get; set; }
 
->caption Change the button size
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await theButton.FocusAsync();
 
-````
-<style>
-    .large-button {
-        width: 200px;
-        height: 50px;
+        await base.OnAfterRenderAsync(firstRender);
     }
-</style>
-
-<TelerikButton Class="large-button">Large button</TelerikButton>
+}
 ````
 
->caption The result from the code snippet above
+## Next Steps
+
+* [Styling the Blazor Button]({%slug button-styling%})
 
-![use css to change the button size](images/button-size-change.png)
+* [Using Button Icons]({%slug button-icons%})
 
 ## See Also
 
   * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)
   * [Events]({%slug button-events%})
-  * [Icons]({%slug button-icons%})
   * [Type]({%slug button-type%})
   * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikButton)
-   
+

components/button/styling.md

@@ -0,0 +1,46 @@
+---
+title: Styling
+page_title: Styling
+description: Learn how to apply styles to the Blazor Button component by Telerik UI.
+slug: button-styling
+tags: telerik,blazor,button,styling,
+published: True
+position: 10
+---
+
+# Styling
+
+There are a few ways to style the Button component:
+
+* Set a [primary button](#primary-button) style.
+* Use another [built-in theme]({%slug general-information/themes%}).
+* Use the [Button `Class`](#button-class) attribute.
+
+## Primary Button
+
+Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true.
+
+>caption Button with the Primary color scheme from the current theme
+
+````CSHTML
+<TelerikButton Primary="true">Primary</TelerikButton>
+````
+
+## Button Class
+
+The Class attribute allows you to define custom CSS rules that apply to the HTML rendering of one or several Buttons.
+
+>caption Set CSS class to the button and change its appearance
+
+````CSHTML
+<TelerikButton Class="my-button">Large button with red text</TelerikButton>
+
+<style>
+    .my-button,
+    .my-button:hover {
+        color: red;
+        width: 200px;
+        height: 50px;
+    }
+</style>
+````