Components are elements you can reuse across your designs. They help to create and manage consistent designs across pages.
A button component with 4 state
Properties are the variable aspects of our component. For example, the properties of a button component could be the Status or Type.
Values are the different options available for each property.
the Status property could have Default, Hover values.
the Type property could have Primary, Secondary values.
One component may have multiple states, but each state needs to be a unique combination of properties and values.
Primary
Secondary
`Default`
**State 1:** Primary Default
State 3: Secondary Default
`Hover`
**State 2:** Primary Hover
State 4: Secondary Hover