Overview
Specs
Guidelines
Accessibility
Angular
- Common buttons prompt users to take most actions in a UI
- Keep button labels concise and in sentence case
- Can contain an optional leading icon either on left or right side
- Always use the provided Atmosphere Design System icon library
What is a common button?
Common buttons prompt users to take most actions in a UI. Atmosphere uses four styles: filled, outlined, text, and filled tonal. Within each style, the two types of buttons are primary and accent.
Use accent buttons for prominent page level actions, while primary buttons are used for most other on-screen interactions. All buttons have fully rounded corners and are wide enough to fit label text.
Storybook
Resources
| Type | Resource | Status |
|---|---|---|
| Design | Figma: Atmosphere Foundations and Components Library | Available |
| Design | Figma: Atmosphere Icons Library | Available |
| Implementation | GitLab: Angular web component | Available |