aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Buttons

Use aConic custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap Buttons documentation

Types

Use .btn-*, .btn-outline-* classes to change the visual style of the button.

                                          
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-outline-primary">Outline</button>
  <button type="button" class="btn btn-link">Link</button> 
                                      

White

Outlined white color style is best suitable for secondary buttons.

                                            
    <button type="button" class="btn btn-white">Button white</button> 
                                        

Color variants

Predefined solid color button styles.

                                          
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button> 
                                      

Outline buttons

Use .btn-outline-*

                                          
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-light">Light</button>
  <button type="button" class="btn btn-outline-dark">Dark</button> 
                                      

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

                                            
    <button type="button" class="btn btn-primary btn-lg">Large Button</button>
    <button type="button" class="btn btn-primary">Default Size</button>
    <button type="button" class="btn btn-primary btn-sm">Small Button</button> 
                                        

Button pilled

Use the .rounded-pill utility class to make buttons more rounded.

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

Radio button group

This group of buttons provide checkbox or radio style button toggling.

                                            
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
        <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
      
        <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
      
        <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </div> 
                                        
                                            
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
      
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
      
        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div> 
                                        

Button icons

A contained button with an icon.

                                            
    <button type="button" class="btn btn-primary">
        Add to Cart
        <i class="bi-basket ms-1"></i>
    </button> 
                                        

With fixed width and height.

                                            
    <button type="button" class="btn btn-primary btn-icon">
        <i class="bi-eye"></i>
    </button>
    <button type="button" class="btn btn-primary btn-icon">
        <i class="bi-person"></i>
    </button>
    <button type="button" class="btn btn-primary btn-icon">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </button> 
                                        

Button with loader

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

                                            
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>
      
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>