Button

This component library provides ample customization for you project. Button component comes in different style and use case as your project demands. Just provide required class to button component and make it styled for your project as you want.

Default Button

Default button comes in flat style and dark color. You can get the default style just providing btn class to the component.

Types

This component library provides 4 different button types other than Default for different use cases. Primary, Secondary, Error, and Success and you can get these just by adding class primary, secondary, error, and success respectively.

Shapes

By default, the button component comes with a flat shape but you get two more rounded corners and rounded edges by adding rounded-corner and rounded-edge to the button component respectively.

Outline

Get outline button by adding outline class.

Button with Icon and Text

Sometimes you need a button with an icon and label. You can get by adding class icon-with-text. You can use any font-awesome/bootstrap icon. Make sure you place an icon on the right side of the button.

Button with Icon

When you need an icon as a button, this library provides it also. An icon comes in 3 different sizes and 2 different shapes. You can get any size by adding small, medium, or large class. By default, the icon has no background shape but you can get any of the two shapes by adding circle or square class to the component. There are 3 more classes primary, black and white. When you need an icon according to your accent color you can add primary class to the component. When there is white background and you need to fix the icon as black always even in the dark theme you can add black class to the component. Similarly with black background, you can add white class to the component.

Floating Action Button

You can use icon as float on the screen. Just add float class and align with top, bottom, left, right classes.

Disable Button

If you want to style disabled button then add disable to the button and you are good to go.

Link

You can customize the link too. When you need an icon as a link, you add classes to get what you desire. Customization for an icon as a link is similar to an icon as a button but for semantic HTML you need to provide classes to the anchor tag. Sometimes you need a simple link, you get by adding link to the anchor tag. With matching to accent color to the theme add primary class. When you faded color as link text then add secondary class.