Component Best Practices

Good components need to be designed well. Taking the time to think of future use cases significantly enhances the components usability.

Sizing and Styling

Generally, it should be the implementation of the component that is responsible for the component's size. There are some exceptions. This means that the width of your component is generally full width and the parent or 'implementor' of the component will control the width.

Examples:

Component Type	What sets size	Comments
Page Header Component	Parent	this allows the header
Button Component	Component	Buttons generally don't take on the shapre of the parent elements. When you need to override a buttons width, you can pass in a class.
Toggle switch	Component	Generally this type of component woudl not adapt its size to the parent
Toggle switch Array	Parent	An array of toggles would wrap or flow based on the containing element

Actions

Context