Button
Button displays an action, summons a popup or modal, and changes elements of the website. On the VTS platform, they are used in table, popover, model, cards, pagination.
Anatomy
Value | Purpose |
aria-labelledby= “label” | Annotates the label of the button. |
aria-describedby= “types” | Indicates the button types |
Configurations
1. Variant
The button comes in five variants: primary, secondary, secondary-neutral, tertiary and tertiary-neutral.
2. Icon
The button icons comes in three options: leading, trailing, and none.
3. Shape
There are two shape styles: pill and square. Make the decision based on visual context.
4. Size
The button comes in 3 sizes: large, medium, and small. Make the decision based on visual context.
5. Label weight
There are two weight designers can choose from, regular and heavy. Make the decision based on visual context.
6. Fitting
There are two ways to fit a button on the screen: content-fit and layout-fit. In content-fit button’s width is expanded to fit the content width. In layout-fit, the button’s width is stretched to the container’s width. In both cases, the maximum width of the button is same as the parent container.
Touch interface
Apple’s iPhone Human Interface Guidelines recommends a minimum touch area of 44 px by 44 px for the touch screen to be accessible for all the users.
Always add extra margins to ensure a minimum 44px height touch area on touch screens.
Keyboard experience
Button involves only one action. Users only need to tap one key to trigger the action.
Composability
TDS buttons suports on TDS icons.
Responsiveness
When the button’s label hits the bound of the container, the labels reflow to the next line. However, this is undesired. Do not put long texts on the label.
1. Layout-fit
The button spans the entire width of the parent container.
2. Content-fit
The button expands to fit the content as much as it can within the confines of the parent container and then starts wrapping the label to the next line.
Visual specs
Margin
The button expands to fit the content as much as it can within the confines of the parent container and then starts wrapping the label to the next line.
Padding
For content-fit buttons, the padding between container and content group keeps the same.
The top and bottom padding are always consistent regardless of the fitting choices.
Icon size
For content-fit buttons, the padding between container and content group keeps the same.
Icon only button
The icon only button has fixed height, width and margin.
The icon size differs for different button sizes.
