Components
Shown here is the complete set of reusable components in the GSG product suite. We define a component as a self-contained, reusable UI element that is immediately identifiable and contains no business logic.
Checkbox
Used to indicate a yes/no answer in a variety of contexts. Should be used with a label for good communication.
- Unchecked
-
- Checked
-
- Indeterminate
-
- With label
Chips
Chips help people enter information, make selections, filter content, or trigger actions.
- Assist
-
calendar_month
- Filter
-
- Input
-
- Suggestion
-
Dialogs
Dialogs provide important prompts in a user flow.
-
Show dialog DialogThis is a dialogOk
Lists
Lists are continuous, vertical indexes of text and images
- Simple list
-
Star Wars Star Trek
- Leading icon
-
Star Wars swords Star Trek rocket
- Trailing icon
-
Star Wars swords Star Trek rocket
- Supporting text
-
Star WarsDystopian
swords Star TrekUtopianrocket
Progress indicator
- Linear, one color
-
- Circular, one color
-
- Linear, four colors
-
- Circular, four colors
-
Radio buttons
Radio buttons let people select one option from a set of options.
- With labels
Ripple
Ripples are state layers used to communicate the status of a component or interactive element.
A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape.
- Bounded
-
- Unbounded
-
Select
- Outlined
-
AppleBananaCherry
- Filled
-
grocery AppleBananaCherry
Switch
- Standard
-
- Icons
-
- Selected icon only
-
Tabs
-
Tab One Tab Two Tab Three
Text field
- Outlined
-
- Outlined with error
-
- Filled
-
- Filled textarea
-