Roxo - Premium Admin Template

- Notifications
  Check all
- Gary Hogan5 mins ago
  
  I have add 2 files for new task
  
  1_day_task.pdf1 MB
  
  day_task.pdf4 MB
- Edwin Day30 mins ago
  
  Marked the bug analysis task as done
- Ralph Waters45 mins ago
  
  New bugs added for designer
- Bookmark
- - Email
  - Feather icon
  - Chat
- Cart
  Check all
- Mi Watch Revolve
  
  $ 10.00
- Ulrich Duffel Bag
  
  $140.00
- Tree Stylish Pot
  
  $ 840.00
- Total
  
  $ 990.00
- Proceed to checkout
- Messages
  Send a new message
- Robert fox
  
  Lorem Ipsum is simply dummy give information
  10 mins ago
  online
- Andrew Young
  
  Lorem Ipsum is simply dummy give information
  25 mins ago
  warning
- Lucia Slaughter
  
  Lorem Ipsum is simply dummy give information
  1 hr ago
  online
Helen Walter
Admin
- Inbox
- Taskboard
- Log out

Buttons

ADMIN PANEL

Template Buttons

Using .btn class you can add btn.

  <button class="text-white btn btn-primary hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button> 
<button class="text-white btn btn-secondary hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button>
<button class="text-white btn btn-success hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button </button>
<button class="text-white btn btn-info hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>
<button class="text-white btn btn-warning hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button>
<button class="text-white btn btn-danger hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>
<button class="text-dark btn btn-light hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>

Active buttons

You can show btn as a active by adding class .btn-active

Preview Html

<button class="text-white btn btn-active btn-primary hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button> 
<button class="text-white btn btn-active btn-secondary hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button>
<button class="text-white btn btn-active btn-success hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button </button>
<button class="text-white btn btn-active btn-info hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>
<button class="text-white btn btn-active btn-warning hover:mt-[-3px] hover:transition-all hover:ease-in-out"> Button </button>
<button class="text-white btn btn-active btn-danger hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>
<button class="text-dark btn btn-active btn-light hover:mt-[-3px] hover:transition-all hover:ease-in-out">Button</button>

Outline Buttons

Add .btn-outline Class for border button

Preview Html

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

Resize Buttons

You can customize all btn by adding class.btn-lg .btn-md .btn-sm .btn-xs

Preview Html

  <button class="btn btn-outline .btn-lg btn-primary text-white">
   Large 
</button> 
<button class="text-white btn btn-outline btn-primary">
   Medium 
</button> 
<button class="btn btn-outline .btn-sm btn-primary text-white">
   Small 
</button> 
<button class="text-white btn btn-outline btn-xs btn-primary">
   Extra-Small 
</button>

Buttons with different HTML tags

You can use .btn class on button, input, a, etc...

Preview Html

Link

  <a role="button" class="btn btn-primary">Link</a>
<button type="submit" class="btn btn-secondary">Button</button>
<input type="button" value="Input" class="btn btn-warning" />
<input type="submit" value="Submit" class="btn btn-info" />
<input type="reset" value="Reset" class="btn btn-danger" />

Responsive & Wide button

You can use .btn class on button, input, a, etc...

Preview Html

  <button class="btn btn-primary btn-lg sm:btn-sm lg:btn-md">
   Responsive
</button>    
<button class="w-64 btn btn-primary btn-wide">
   Wide
</button>

Disabled buttons

Add Class .btn-disabled or disabled=”disabled” attribute for disabled button

Preview Html

  <button disabled="disabled" class="btn btn-secondary">
   Disabled using attribute
</button>    
<button class="btn btn-secondary btn-disabled" tabindex='-1' role='button' aria-disabled='true'> 
  Disabled using class name
</button>

Glass buttons

You can use glass button by adding class .glass

Preview Html

   <button class="text-white btn glass">
   Glass Button
</button>

Buttons Shape

you can use .btn-* class to shape the button. ie. square, rounded.

Preview Html

  <div class="flex flex-wrap gap-2"> 
   <button class="btn btn-warning btn-rounded h-14 w-14">X</button> 
   <button class="btn btn-outline btn-warning btn-rounded h-14 w-14">X</button>
   <button class="btn btn-success btn-square h-14 w-14">X</button>
   <button class="btn btn-outline btn-success btn-square h-14 w-14">X</button>
</div>

Button with icon

Here is show button with icon

Preview Html

  <button class="btn btn-accent"> 
  +iconly('', 'Heart', 'text-[24px]', ['1','2','3'], 'path_formatter')
   Likes
</button>
<button class="btn btn-accent"> 
   Wishlist
  +iconly('', 'Heart', 'text-[24px]', ['1','2','3'], 'path_formatter')
</button>

Block Button

you can use .block class for button block.

Preview Html

  <div class="flex flex-wrap gap-2">
   <button class="block w-full text-white btn btn-primary">Button block</button>
</div>

Button with loader

You can use loader

Preview Html

  <div class="flex flex-wrap gap-2">
   <button class="btn btn-primary">
     <div role="status">
       <svg class="w-5 h-5 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </div>
   </button>
   <button class="btn btn-success btn-square">
     <div role="status">
       <svg class="w-5 h-5 mr-2 text-gray-200 animate-spin fill-primary"></svg>
       <span class="sr-only"></span>
     </div>
   </button>
</div>

Button Group

you can use the buttons as a button grouping.

Preview Html

  <div class="flex flex-wrap gap-2">
   <button class="px-3 py-2 text-sm font-medium text-white border border-gray-300 rounded-none bg-primary hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Profile</button>
   <button class="px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 rounded-none hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Setting</button>
   <button class="px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 rounded-none hover:bg-primary hover:text-white focus:text-white focus:bg-primary">Message</button>
</div>