These components accelerate our designers and front-end engineers and show how they behave interactively. Shared components let us reuse existing work and build upon what we have.
Talk to someone in Design Systems Team for help on names that work for designers and engineers, as well as respect industry guidelines like W3C specifications, popular frameworks, and so on. For example:
Where possible, we build on the community of practice around design systems and open-source component libraries. There's no need to reinvent the wheel.
Find 3 examples of someone who's done this before. For example, try Shopify's Polaris Design System, Atlassian's Design System, Salesforce's Lightning Design System, Ant Design's System, or Google's Material Design. You might find inspiration for design guidelines, prop names, and implementation details. Look for a component library or framework that's already built what you're considering.
You might need to consider:
There might be more than 1 dimension of state. In addition to default, hover, focus, active, and disabled states, a component might have other dimensions of states such as a checkbox being checked, unchecked or mixed, or an input being read-only. See the Interaction states guidelines.
It is common for components to come with default margins surrounding them and yet these margins can cause problems in app, given surrounding content. For all components that come with default spacing, we provide a
noMargin boolean prop to turn the default margins off as needed.
Use "Small", "Medium", "Large": in code,
lg. For more information, see Sizing guidelines.