Content Comparison

...

[ category ] represents the broadest classification (components, organisms, etc.).
[ component ] type represents the specific component being referred to (button, checkbox, toggle, input, etc.).
[ style ] describes the general appearance or behaviour of the component (standard, iconOnly, textOnly, etc.).
[ variant ] specifies the purpose or use-case for the component (primary, secondary, tertiary, information, success, warning, etc.).
[ size ] denotes the component's dimensions or scale (small, medium, large, etc.).
[ state ] describes the current interaction or status of the component (default, hover, focus, active, disabled, etc.).

Variants

Atomic design

Atomic design

States

(add different states)

Classification

There are three different classification used

Atomic design

Atomic design is a methodology developed by Brad Frost for creating design systems in a systematic and hierarchical manner.

...

Data

...

visualisation

These components are responsible for presenting data in a clear, organized, and visually appealing manner

...

...