Codebase 6 Components

There are only a few things in Codebase that can be categoriased as components. Most other things can be styles using Codebase utility classes.

Badges

Badges in Codebase are circular indicators that can be used to display a number or status. They are often used in conjunction with buttons or links to indicate notifications or counts.

Use the badge class on a SPAN 1 or a SUPERSCRIPT²

Labels

Labels in Codebase are used to highlight or categorize content. They can be used to indicate status, categories, or other important information.

Use the label class on a SPAN or LABEL Label

Buttons

Buttons in Codebase are styled using utility classes. You can create buttons with different sizes, colors, and states by applying the appropriate classes.

Use the btn class on an ANCHOR Button, and it will be styled as a button. Buttons have a hover state that has a darker background.

Button Sizes

Buttons can be sized using the btn-sm and btn-lg classes. The default button size is medium.

Small Button Medium Button Large Button

If you want the text to be bigger too, there are corresponding text size utilities.

Small Button Medium Button Large Button

<a href="#" class="btn btn-sm t-sm">Small Button</a>
<a href="#" class="btn">Medium Button</a>
<a href="#" class="btn btn-lg t-lg">Large Button</a>

Buttons with Icons

Buttons can also include icons ★ Button with Icon. You can add the icon class to make the button square and if only an icon is needed in the button ★.

For alignment within button groups, use Codebase layout flex and optional gap-1 classes.

User Interface Colors

The following colors are used in Codebase for user interface elements. They are designed to provide a consistent look and feel across the application. You can use these colors for buttons, badges, labels, and other UI components. The colors are defined in the CSS variables and can be customized as needed. These UI color names affect the background color of elements, and the text color will automatically adjust to ensure readability.

primary is purple with white text

secondary is blue with white text

tertiary is gray with white text

info is blue with white text

success is green with white text

warning is amber with black text

danger is red with white text

So, to UI-colorize components, simply add the UI keyword classes as above.

When applied to buttons (and link pseudo-buttons), these UI color classes also apply a hover background color that is slightly darker.

— with no UI color class added

For more on colors see colors.