Button
Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions.
Usage
Basic
Show code
Button
Primary & Secondary
Show code
Primary text
secondary text
Primary text
this is the secondary text
Variant
Show code
The Button offers three style variants: Fill (default), Outline, and Text.
Fill
Outline
Text
Fill
this is the secondary text
Outline
this is the secondary text
Text
this is the secondary text
Fill
Outline
Text
Fill
this is the secondary text
Outline
this is the secondary text
Text
this is the secondary text
Icon
Show code
BitButton has an icon slot that, if specified, renders an icon that can be set at the start (default) or revered positioned at the end of component.
Start
Start
Start
Start
this is the secondary text
Start
this is the secondary text
Start
this is the secondary text
End
End
End
End
this is the secondary text
End
this is the secondary text
End
this is the secondary text
Loading
Show code
Demonstrate the dynamic loading state of buttons using the "IsLoading" property. Customize the loading label to provide users with feedback on ongoing processes.
Click me
Click me
Click me
Click me
this is the secondary text
Click me
this is the secondary text
Click me
this is the secondary text
AutoLoading:
Click me
Loading Label
Show code
Explore customizing the loading label and its different positions, including start, end, bottom, and top.
End...
Start...
Bottom...
Top...
Href
Show code
Use BitButton as a hyperlink to external URLs, opening either in a new tab or the same tab.
Button Type
Show code
BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.
Templates
Show code
Here are some examples of customizing the button content.
A primary template
Primary text
A secondary template
A primary template
A secondary template
Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading states.
Events
Show code
Managing button click event (OnClick).
Click me (0)
Size
Show code
Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Small:
Fill
Outline
Text
Fill
this is the secondary text
Outline
this is the secondary text
Text
this is the secondary text
Medium:
Fill
Outline
Text
Fill
this is the secondary text
Outline
this is the secondary text
Text
this is the secondary text
Large:
Fill
Outline
Text
Fill
this is the secondary text
Outline
this is the secondary text
Text
this is the secondary text
Color
Show code
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
Primary
Primary
Primary
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Info
Info
Info
Success
Success
Success
Warning
Warning
Warning
SevereWarning
SevereWarning
SevereWarning
Error
Error
Error
PrimaryBackground
PrimaryBackground
PrimaryBackground
SecondaryBackground
SecondaryBackground
SecondaryBackground
TertiaryBackground
TertiaryBackground
TertiaryBackground
PrimaryForeground
PrimaryForeground
PrimaryForeground
SecondaryForeground
SecondaryForeground
SecondaryForeground
TertiaryForeground
TertiaryForeground
TertiaryForeground
PrimaryBorder
PrimaryBorder
PrimaryBorder
SecondaryBorder
SecondaryBorder
SecondaryBorder
TertiaryBorder
TertiaryBorder
TertiaryBorder
Style & Class
Show code
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
Styled Button
this is the secondary text
Classed Button
Styles & Classes:
Click me
Click me
RTL
Show code
Use BitButton in right-to-left (RTL).
دکمه با آیکن
دکمه با آیکن
دکمه با آیکن
دکمه با آیکن
این متن ثانویه است
دکمه با آیکن
این متن ثانویه است
دکمه با آیکن
این متن ثانویه است
در حال بارگذاری
در حال بارگذاری
در حال بارگذاری
API
BitButton parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitVariant enum
Name |
Value |
Description |
---|---|---|
BitColor enum
Name |
Value |
Description |
---|---|---|
BitSize enum
Name |
Value |
Description |
---|---|---|
BitLabelPosition enum
Name |
Value |
Description |
---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitDir enum
Name |
Value |
Description |
---|---|---|
- On this page