diff --git a/components/button/disabled-button.md b/components/button/disabled-button.md new file mode 100644 index 0000000000..70fc9e5c51 --- /dev/null +++ b/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 +

+ +

+ +@ButtonText + +@code { + bool ButtonIsEnabled { get; set; } = false; + string ButtonText => ButtonIsEnabled ? "Enabled Button" : "Disabled Button"; +} + +>caption Comparison between disabled and enabled button + +![](images/disabled-button.png) \ No newline at end of file diff --git a/components/button/overview.md b/components/button/overview.md index 63099e8874..7af906264f 100644 --- a/components/button/overview.md +++ b/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 Blazor Button component and its core features. +This article introduces the Blazor Button component, 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 `` 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 `` 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 `` 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 -Hello! - -@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 -Primary -```` - ->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 -Disabled Button -```` - ->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 -My text is red. - - -```` +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 +Hello! +@code{ + Telerik.Blazor.Components.TelerikButton theButton { get; set; } ->caption Change the button size + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await theButton.FocusAsync(); -```` - - -Large button +} ```` ->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) - + diff --git a/components/button/styling.md b/components/button/styling.md new file mode 100644 index 0000000000..c05a34a971 --- /dev/null +++ b/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 +Primary +```` + +## 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 +Large button with red text + + +````