...
[ 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.).
category | components organisms |
component | standard icon-only … |
Variants
...
States
Atomic design
States
(add different states)
https://base.uber.com/6d2425e9f/p/65ae6d-states
...
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.
...