Directional

Definition: A directional button is an element that indicates movement in the left and right direction.

HTML

Add .left or .right class together with .btn class for the direction needed.


                                                        
                                                        
                                                            <button type="button" class="btn left">Default left</button>

Open in Storybook

Sizes - large buttons

Add .btn-lg for a larger size.


                                                        
                                                        
                                                            <button type="button" class="btn btn-lg right">Default right large button</button>

Color style variant

Add .btn-primary class for primary style.


                                                        
                                                        
                                                            <button type="button" class="btn btn-primary left">Primary left</button>

CSS Tokens/Variables

For the overwrite tokens visit the button standard CSS Tokens, since there are the same.

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.