Buttons
Learn about buttons, and how to best use them in the Base System
1.0 Buttons
Buttons are essential interactive elements used to trigger actions or navigate users through an interface. They play a critical role in guiding user interaction, whether it's submitting a form, starting a process, or linking to another page. In the Base System, buttons are designed to be functional, accessible, and easily customizable, ensuring they meet both usability and aesthetic requirements.
Explore the default button classes and properties below, or learn more about how buttons are used in your layouts through the interaction overview page.
2.0 Primary Button Classes
Buttons come with predefined styles for quick and consistent application across your project. The table below details the default button classes and their associated properties. You can modify these classes or create custom ones to better fit your design language.
3.0 Secondary Button Classes
3.0 General Usage
3.1 Element Type
Avatar classes provide a utility class with a fixed width and height, along with any additional styles such as border radius. This class is typically applied to a div-block element, with an image inside that is given the class Image Cover.
We use link blocks rather than buttons generally because link blocks achieve the same outcome while also enabling users to easily add icons to the buttons without having to change the element. but you can still use buttons there should be no difference.
We do not give the text block a class it should be inheriting its size properties directly from ther button class
3.2 Class Naming
Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Sections: Default sections use descriptive names based on the top and bottom padding.
Example:
Column Large,Column Regular,Row Small
Custom Sections: Use section as a suffix to the parent category
Example:
Testmonial Column Small,Pricing Feature Row
Last updated
