React Suite Button Color

Spectre Button colors

Last Updated : 13 Dec, 2021

The button is an important feature of any website or in any app. The Spectre Button color class is used to define the color of the button.

Button Color Class:

btn-primary: This class is used to set the color of the button as blue.
btn-success: This class is used to set the color of the button as green.
btn-error: This class is used to set the color of the button as red.

Note: If you need more button colors, please use button mixins to create your own button color variants.

Example: Below example illustrate the Button Color in Spectre.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Buttons Class</title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Button Color Class</strong>
        <br>
        <button class="btn btn-primary">Primary Color</button>
        <button class="btn btn-success">Success Color</button>
        <button class="btn btn-error">Error Color</button>
    </center>
</body>

</html>

Output:

Reference: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-colors

React Suite Button Color

S

skyridetim

Improve

Article Tags :

Similar Reads

The button is an important feature of any website or in any app. There are a few particular things that we all should care about buttons like color, size and etc. In spectre we have some specific classes for individual things on buttons. All the classes are mentioned and described below: Spectre But

Spectre Button Size

The button is an important feature of any website or in any app. The Spectre Button size class is used to define the size of the button. Button Size Class: btn-lg: This class is used to set the button size into large.btn-sm: This class is used to set the button size into small. Note: You could use t

Spectre colors is one of the most useful utilities, there are two types of things where we can use colors. Like we can set colors for the text and we can set color for the background. Colors are used to style your component, sometimes we need to color the text or sometimes we need to color the backg

Spectre Button Group

In this article, we will know Spectre Button Group, its various available classes & will understand it through the examples. The Button is an important feature of any website or in any app. Sometimes you will need to categorize the buttons. The Spectre Button group class is used to set the categ

React Suite Button Color

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. In this article, we will be discussing the React Suite Button Color. To change th

Spectre Text Colors

Spectre colors are one of the most useful utilities, there are two types of things where we can use colors. Like we can set colors for the text and we can set colors for the background. In this article, we will learn about the text color, along with understanding, how we can set the colors of the te

Primer CSS Buttons

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by

Spectre Button States

The button is an important feature of any website or in any app. The Spectre Button state class is used to define the states of the button. Button States Class: active: This class is used to show that the button is active which is the default.disabled: This class is used to show that the button is d

React Suite Button ts:Color Props

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. ts:Color props are used to provide different colors to the Buttons. It provides d

Blaze UI Button Colors

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c