Bookmark Streamline Icon: https://streamlinehq.com
Chapter 5
Circle Clock Streamline Icon: https://streamlinehq.com
10 Minutes
Feedback

Interface

Buttons

We can apply combos to adjust the font-size, font-weight, padding and height of buttons.

Combo Class
Styles
Button Body
is--tiny
Font-size, Padding, Min-Height, Font Weight
Button Body
is--xsm
Font-size, Padding, Min-Height, Font Weight
Button Body
is--sm
Font-size, Padding, Min-Height, Font Weight
Button Body
is--md
Font-size, Padding, Min-Height, Font Weight
Button Body
is--lg
Font-size, Padding, Min-Height, Font Weight
FAQs
How do I control button widths?
Why seperate the button and button body classes?
Pills

We can apply combos to adjust the font-size, font-weight, padding and height of pills.

Combo Class
Styles
Pill Body
is--tiny
Font-size, Padding, Min-Height, Font Weight
Pill Body
is--xsm
Font-size, Padding, Min-Height, Font Weight
Pill Body
is--sm
Font-size, Padding, Min-Height, Font Weight
Pill Body
is--md
Font-size, Padding, Min-Height, Font Weight
Pill Body
is--lg
Font-size, Padding, Min-Height, Font Weight
Tags

We can apply combos to adjust the font-size, font-weight, padding and height of tags.

Combo Class
Styles
Tag Body
is--tiny
Font-size, Padding, Min-Height, Font Weight
Tag Body
is--xsm
Font-size, Padding, Min-Height, Font Weight
Tag Body
is--sm
Font-size, Padding, Min-Height, Font Weight
Tag Body
is--md
Font-size, Padding, Min-Height, Font Weight
Tag Body
is--lg
Font-size, Padding, Min-Height, Font Weight
Forms

We can apply combos to adjust the styles of form lists, forms list items and form elements.

4.1 Form Lists

Control the spacing between form list items.

Combo Class
Description
Form List
is--sm
Small flex gap applied
Form List
is--md
Medium flex gap applied
Form List
is--lg
Large flex gap applied
4.2 Form List Items

Control the spacing between field labels and form fields.

Combo Class
Description
Form List Item
is--sm
Small min-height applied
Form List Item
is--md
Medium min-height applied
Form List Item
is--lg
Large min-height applied
4.3 Text Fields

Adjust the size of text fields.

Combo Class
Styles
Text Field
is--sm
Font-size, Font Weight, Min-Height
Text Field
is--md
Font-size, Font Weight, Min-Height
Text Field
is--lg
Font-size, Font Weight, Min-Height
‍‍