# Introduction

The hhl-btn component replaces the standard html button with a design and a multitude of options.

# Size

You can can make it Small by adding the property small or Big by adding big.

# Flat

You can can make the style Flat by adding the property `flat``.
By adding transparent you will remove the hover background color.

# Round

You can can make the style Round by adding the property round.

# Outline

You can can make the style Outline by adding the property outline.

# Icon

You can add icon by adding the property icon-left="iconName" if you want a icon on the left side of the text or icon-right="iconName" if you want a icon on the right.

# Color by property

You can change the color by setting the color="colorValue"
The syntax for colorValue is backgroundColor/color eg red/white.

# Color by theme colors

You can change the color by setting the color="bg-themeColor"
The theme colors are bg-pri bg-sec bg-ok bg-err bg-warn bg-info bg-black bg-white
The default is: bg-pri

# Disabled

# CSS Variables

Name	Default	Describtion
--hhl-btn-bgcolor	Theme: --col-txt-on-pri	The color of the check mark.
--hhl-btn-color	Theme: --col-pri	The background color.