Moped Documentation
  • Welcome 👋
  • User Guides
    • Getting started
    • Map a project
  • Product Management
    • User communication
    • User management
    • User analytics
    • Local testing
    • Release process
    • Patch release process
    • MUI X Pro License
    • Integrations
      • Dataset documentation
      • ArcGIS Online
      • eCapris
      • Power BI
    • Features
  • Dev Guides
    • DB Docs & Data dictionary
    • Database backup policy
    • Moped Read Replica
    • How-to's
      • How do I start the Hasura cluster locally?
      • How do I launch the Hasura Console?
      • How do I get a JWT token?
      • How to ping the GraphQL API
      • How to ping the REST API
      • How do I connect a database with Postgres GUIs?
      • How do I connect to the RDS instance?
      • How to load production data into a local instance
      • How do I update seed data?
    • Hasura
      • Hasura Roles
      • Hasura Migrations
        • Getting Started
        • Installing the Hasura CLI
        • Configuration Files
        • Hasura Migration Principles
        • The Migration file format
        • Development
        • Hasura Seed Data
        • Running the Hasura Cluster Locally (video)
        • Create a migration: Exercise 1 (video)
        • Create a migration: Exercise 2 (video)
        • Latest hasura-cluster features
    • User Management
    • Authentication
      • Authentication Architecture
      • DynamoDB & Cognito
      • Secrets Manager & Cognito
      • Hasura & Cognito
      • React & Cognito
      • Flask API & Cognito
      • Single Sign-On with CTM
    • Code organization
    • API
      • Configuration Files
      • Testing
      • User Management API
    • Maps and geospatial data
      • Access tokens and API keys
      • Map libraries
      • Map data
      • Map styles
      • Map layers and basemaps
      • React patterns
      • V1 Archive
        • Map libraries
        • Map data
        • Map custom hooks
        • Map styles
        • Map layers and basemaps
    • UI access control
    • Design system
      • Branding
      • Component styles
      • Text content
    • Activity Log
      • Architecture
      • GitHub Actions and Deployment of Updates
      • Hasura Event Logs and Truncate Cron Job
      • Authentication
  • See also
  • Get Moped support, report a bug, or request an enhancement
  • Data & Technology Services
  • Github repository
Powered by GitBook
On this page
  • Text fields
  • Select fields
  • Edit confirmation
  • Material Table customizations
  • Icons

Was this helpful?

  1. Dev Guides
  2. Design system

Component styles

PreviousBrandingNextText content

Last updated 3 years ago

Was this helpful?

Moped is built with and . We apply/retain the Material UI default styles and functionality unless user testing or technical complications justify customization.

Text fields

Use the Standard styling for all inputs.

Select fields

If the value in a dropdown menu is not a required field, provide a - hyphen at the end of the list for users to clear any previously selected value.

Edit confirmation

  • Align on the right side

  • "Cancel" to the left of "Save" button

Material Table customizations

Icons

Use the for single select.

Use for multiple select. Checked boxes should be rendered in our Primary Main color.

Based on the :

Use the outline variant of the official . is included in Devias, but doesn't have as many icons.

basic standard variant
checkmarks
Material Design confirmation dialog
Form validation fix
Move action buttons to the far right
Enable date-clearing
Google Material Icons
React Feather
Material UI
Devias
text field