Docs Menu

Buttons

Buttons have the following properties which are optional:

Property Required? Type Options Description
btnType no string
  • button (default)
  • submit
  • reset
 What action the button performs.
btnGroup no bool
  • false (default)
  • true
 Must be set to true when used in a Button Group component.
classes no string A list of additional classes you want to add to the styling.
disabled no bool
  • false (default)
  • true
 Is the button disabled?
href no string If set to anything (a relative or absolute path), the button converts to an tag.
icon no string Displays a custom icon in the button (can be used without text).
id no string id value of the Button component.
size no string
  • null (default)
  • sm (small)
  • md (medium)
  • lg (large)
 The size of the button.
type no string
  • null (default)
  • warning
  • success
  • info
  • notice
 The color theme of the button.

Basic Examples
Basic Button with the default settings. 

            
1<x-fcui-button btnType="submit">Default Button</x-fcui-button>

Advanced Examples
Convert the button component into the <a href="#"> tag while maintaining button styling. 

            
1<x-fcui-button href="#"
2                        size="lg"
3                        icon='<i class="fa-solid fa-house"></i>'
4                        classes="w-1/2"
5                        id="btnIdHere">Button Link</x-fcui-button>
Button Link
Disabled button. 
            
1<x-fcui-button size="md" type="warning" :disabled="true">Disabled Button</x-fcui-button>