Brand UI Documentation
search
⌘Ctrlk
Brand UI Documentation
  • πŸ”₯Overview
  • ✨What's new?
    • v1.0.0
  • πŸš€Getting started
    • Live Demo
    • Installation
  • πŸ› οΈConfiguration
    • Branding
  • ✨Utilities
    • Colors
    • Typography
    • Visibility
    • Spacing
    • Border radius
    • Box sizing
  • πŸ“Layout
    • Flexbox
    • Grid
    • Responsive
  • πŸ“Components
    • Buttons
    • Inputs
    • Cards
    • Badges
    • Tables
  • Modals
  • Avatars
  • Toasts
  • Progressbar
  • Tooltips
  • Spinner
  • πŸ—ƒοΈElements
    • Header
    • Forms
    • Image Slider
    • Footer
  • βž•Extend
    • Animate.style
    • Confetti canvas
    • Google Icons
    • Bootstrap 5 Icons
  • πŸ“¦Templates
    • Hero section
    • Contact section
    • News section
    • Blog section
  • NPM Package
  • Examples
  • Githubarrow-up-right
gitbookPowered by GitBook
block-quoteOn this pagechevron-down
  1. πŸ“Components

Buttons

hashtag
Default button

<button>Test Button</button>
https://codepen.io/CGWebDev2003/pen/rNqOPqbcodepen.iochevron-right
Default button example

hashtag
Primary button

https://codepen.io/CGWebDev2003/pen/XWxmGpbcodepen.iochevron-right
Primary button example

hashtag
Secondary button

https://codepen.io/CGWebDev2003/pen/YzJygNxcodepen.iochevron-right
Secondary button example

hashtag
CTA button

https://codepen.io/CGWebDev2003/pen/NWOGJdEcodepen.iochevron-right
Call to action button example

hashtag
Button sizes

You can setup a button in thee different sizes.

hashtag
Button XS

hashtag
Example

https://codepen.io/CGWebDev2003/pen/zYmBjxGcodepen.iochevron-right

hashtag
Button L

hashtag
Example

https://codepen.io/CGWebDev2003/pen/XWxKqbJcodepen.iochevron-right

hashtag
Button XL

hashtag
Example

https://codepen.io/CGWebDev2003/pen/dygXeovcodepen.iochevron-right

PreviousResponsivechevron-leftNextInputschevron-right

Last updated 2 years ago

  • Default button
  • Primary button
  • Secondary button
  • CTA button
  • Button sizes
  • Button XS
  • Button L
  • Button XL
<button class="primary-button">Primary Button</button>
<button class="secondary-button">Secondary Button</button>
<button class="cta-button">CTA Button</button>
<button class="primary-button button-xs"></button>
<button class="primary-button button-l"></button>
<button class="primary-button button-xl"></button>