Usage
How the components are shaped, so you can guess the next one correctly.
Appearance, not level
A component says how loud it is with appearance. There is no numeric scale.
Boolean props read as sentences
isDisabled, isSelected, isInvalid, isRequired. Never disabled or invalid on their own.
Labels are children, not props
Text goes between the tags. A prop is only used where the text is not visible, like an icon button's label.
<Button appearance="primary">Save changes</Button>
<IconButton icon={<Plus />} label="Create" />A field is three parts
A label, the control, and a message. Field puts the spacing between them.
Messages carry their own meaning
Pick the component by where the message goes, then the appearance by what kind of news it is.