Heading Extra Large
Heading Large
Heading
Heading Small
Heading Extra Small
Heading Tiny
Text Extra Large
Text Large
Text
Text Small
Text Extra Small
Text Dimmed
Link Components
Link ExampleHere a LinkWrapper component wraps around the BoxOutlined to make the entire component clickable.
Buttons
Button Links
* The difference between Buttons and Button Links is that the second is rendered as a link, therefore it accepts direct link props, such as href or target.
Button LinkButton Link AlternativeButton Link OutlinedButton Link Outlined AlternativeDivider Component
Input Components
Box Components
Text Nested in Box Element
Containers
Example of a text nested in a simple Container component.
Flex Containers (Row Direction)
* Automatically adjusts for mobile screens.
Example of Box Inside Flex Container (ROW)
Example of Box Inside Flex Container (ROW)
Example of Box Inside Flex Container (ROW)
Flex Containers (Column Direction)
* Automatically adjusts for mobile screens.
Example of Box Inside Flex Container (COLUMN)
Example of Box Inside Flex Container (COLUMN)
Example of Box Inside Flex Container (COLUMN)
Grid Containers
Example of Box Inside Grid Container
Example of Box Inside Grid Container
Example of Box Inside Grid Container
Dropdown
Dropdown Example
Span Components
Example of SPAN text inside a Box component
Text Area
Toggle Button
Modal
Created with Llane UI
Special Mobile Footer
Created with Llane UI