Atoms are usually made with only one single HTML element.

- [`<Alert />`](#/Components/Atoms/Alert)
- [`<AlertBox />`](#/Components/Atoms/AlertBox)
- [`<Badge />`](#/Components/Atoms/Badge)
- [`<Button />`](#/Components/Atoms/Button)
- [`<Card />`](#/Components/Atoms/Card)
- [`<Doprdown />`](#/Components/Atoms/Dropdown)
- [`<ErrorMessage />`](#/Components/Atoms/ErrorMessage)
- [`<Heading />`](#/Components/Atoms/Heading)
- [`<InputLabel />`](#/Components/Atoms/InputLabel)
- [`<InputRange />`](#/Components/Atoms/InputRange)
- [`<InputText />`](#/Components/Atoms/InputText)
- [`<Link />`](#/Components/Atoms/Link)
- [`<SidekickCard />`](#/Components/Atoms/SidekickCard)
- [`<Spinner />`](#/Components/Atoms/Spinner)
- [`<ThreeDotsSpinner />`](#/Components/Atoms/ThreeDotsSpinner)
- [`<Text />`](#/Components/Atoms/Text)

### Tips

- You can create [molecules](/#/Components/Molecules) out of atoms
- Every atom component must extend its native HTML element
  - for example the `Button` component extends from `React.ButtonHTMLAttributes<HTMLButtonElement>`.