## Variants
- Define the appearance difference of the component.
- Also apply complex styles to a component based on a single prop name called `variant`.


## Colors
- Define the color difference of the component. The color should be meaning to that.
- Apply color to the component based on a prop name called `color`.


## Sizes
- Define the set of typography + circumference (area of component size) of component.
- Apply size to the component based on a prop name called `size`.


## Icon support
- Define the icon placement of the component. 
- Render given icon of the component a prop name called `placement`.
- first, last will be placed inside the component also based on direction props inside it place will be changed.


## States 
- Define state visual indiction and act to the component.
- It can be form states => errored, invalid, disabled, required, mandatory, readonly, 
  UI states => focused, hovered, highlighted, inprogress, loaded


## Tag Attributes
- Define the all other attributes (should not used in props) the used tag inside the component 
- 
