UI Components
States
If we are creating new content component and extends Component from substance we are getting state handling right out of the box. The different states we have more general, selected and focused. With this we can render different content and style based of that. A good example of component are the Image component in the content area.
Components styles
We have introduced a type property so you can send in a space separated string ("primary small disabled") for the latest of our components for give the component different styles. In that way it's easy to add and remove styles without extending the component props list and keep it more slim and readable.
See more example for UIButton and UIChip below.
UIButton
For technical implementation see UI Components: UIButton
Following properties decide style of the button.
Type (Optional)
To give the UIButton different style you should use the property type. You can provide different style with just applying different style with space (" "). It doesn't matter in which order it's applied. Default: primary
For more real example see example section below with pictures and example code.
Size (Optional)
You also have the property size that can determines different style to the button
Width (Optional)
You also have the property width that can determines different style to the button
Icon (Optional)
Icon property is used with Font Awesome 4.0 naming.
Styles and examples
Examples
Examples
Examples
Examples
Width
Sizes
UIButtonGroup
For technical implementation see UI Components: UIButtonGroup
UIIconButton
For technical implementation see: UI Components: UIIconButton
UIChip
For technical implementation see: UI Components: UIChip
Examples
Last updated