Button
The primary way to perform actions in an Orchid site or app.
- Default button
- Small button
- Centered button
- Icon before text button
- Icon after text button
- Icon only button
- Purple button
- Dark gray button
- White button
- Bare button
- Text button
- Loading button
Default button orc-c-btn
The primary way to perform actions in an Orchid site or app.
Small button orc-c-btn--small
Decreases the button and text size.
Centered button orc-c-btn--center
Horizontally centers the button.
Icon before text button
Places an + icon to the left of the button text.
Icon after text button
Places an + icon to the right of the button text.
Icon only button
Button description
Purple button orc-c-btn--purple
Button description
Dark gray button orc-c-btn--dark-gray
Applies a dark gray background to the button.
White button orc-c-btn--white
Applies a white background to the button.
Bare button orc-c-btn--bare
Removes any background or border unless the button is hovered over.
Text button orc-c-btn--text
Removes any text style, background image, border, or padding.
Loading button is-loading
Indicates that the action is loading.
Usage
When to use
Use a button when there is one prioritized call to action.
When to consider an alternative
If the user has a choice to make, with each choice requiring an interactive next step, use a button group.
Class Name | Description |
---|---|
Required
|
Apply to the containing HTML element. Used with a |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Modifier
|
Add to the |
Recommended
|
Add within |
|
Icon within a button. When |
JS
|
Add to first |
JS
|
Add to an additional |
|
Utility class aded to |
Recommended
|
Text of the button. |
JS
|
Add to |
|
The SVG image that needs to be added if a button is in an |