Buttons

Buttons are the heart of any web application. It's the one with which the user interacts the most. Buttons in Ingredients have therefore been designed with just this in mind.

Buttons should always be standing out unless you don't want them to. They should not go unnoticed. Variety and sizes are another aspect which shouldn't be overlooked.

Types of Buttons in Ingredients

We at Ingredients know that you love choices. Sweat not! We've got you covered. Buttons in Ingredients come in 3 main variants. They are:

• Contained Buttons
• Outlined Buttons
• Link Buttons
• Buttons with icons
• Floating action button

Let's look at how these variations will look at your screen.

Contained Button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

            
                DEFAULT
                PRIMARY
                SECONDARY
                SUCCESS
                FAILURE
            
        

Outlined Buttons

Buttons are the heart of any web application. It's the one with which the user interacts the most. Buttons in Ingredients have therefore been designed with just this in mind.

            
            PRIMARY
            SECONDARY
            SUCCESS
            FAILURE
            
        

Icon Buttons

Buttons are the heart of any web application. It's the one with which the user interacts the most. Buttons in Ingredients have therefore been designed with just this in mind.

            
                
                
                    delete
                    DELETE
                
            
        

Link Buttons

Buttons are the heart of any web application. It's the one with which the user interacts the most. Buttons in Ingredients have therefore been designed with just this in mind.

            
                
                
                    Link Button
                
                
                    Link Button
                
                
                    Link Button
                
                
                    Link Button
                
            
        

Floating Action Button

Buttons are the heart of any web application. It's the one with which the user interacts the most. Buttons in Ingredients have therefore been designed with just this in mind.

            

                Just add the class "fab" to the button
                
                    arrow_upward