Buttons

Buttons (jds-btn)

Buttons are clickable items used to perform an action. Button have some size or different text and background color to specify what kind of action need to do.

We need to add class jds-btn in the parent dome.

Code View

Button Deafult

Various Button color version

We can set the color by adding a css class, like btn-primary

Button link / ghost

jds-btn

Button link Focus & Hover Button Active Button Disabled

Invart Color Button (light themes or dark automaticaly change to invart)

Button Invart Focus & Hover Active Disabled Button Gradient Button Outline

Button white

jds-btn btn-white

Button White Focus & Hover Active Disabled Button Gradient Button Outline

Button black

jds-btn btn-black

Button Black Focus & Hover Active Disabled Button Gradient Button Outline

Button Gray

jds-btn btn-gray

Button Gray Focus & Hover Active Disabled Button Gradient Button Outline

Button Primary

jds-btn btn-primary

Button Primary Focus & Hover Active Disabled Button Gradient Button Outline

Button Success

jds-btn btn-success

Button Success Focus & Hover Active Disabled Button Gradient Button Outline

Button Warning

jds-btn btn-warning

Button Warning Focus & Hover Active Disabled Button Gradient Button Outline

Button Error

jds-btn btn-error

Button Error Focus & Hover Active Disabled Button Gradient Button Outline

Button Info

jds-btn jds-info

Button Info Focus & Hover Active Disabled Button Gradient Button Outline

Button Tertiary

jds-btn btn-tertiary

Button Tertiary Focus & Hover Active Disabled Button Gradient Button Outline

Code View

Button primary

We can set some pre-define size for the button by adding a CSS class, like:

btn-xxs, btn-xs, btn-s, btn-m, btn-l, btn-xl, btn-xxl

Solid Button / size

Button btn-xxs

Button btn-xs

Button btn-s

Button btn-m

Button btn-l

Button btn-xl

Button btn-xxl

Outline Button / size

Button btn-xxs

Button btn-xs

Button btn-s

Button btn-m

Button btn-l

Button btn-xl

Button btn-xxl

Gradiant Button / size

Button btn-xxs

Button btn-xs

Button btn-s

Button btn-m

Button btn-l

Button btn-xl

Button btn-xxl

Button Link

We can set some pre-define link for the button by adding a css class, like:

btn-link

Button btn-xxs Button btn-xs Button btn-s Button btn-m Button btn-l Button btn-xl Button btn-xxl Button btn-xxl Button btn-xxl

Button outline

We can also set outline version for the button by adding a css class, like:

btn-outline

White outline Black outline Gray outline Primary outline Success outline Warning outline Error outline Info outline Tertiary outline

Button Rounded

We can set some pre-define size for the button by adding a css class, like:

btn-rounded

Button btn-xxs Button btn-xs Button btn-s Button btn-m Button btn-l Button btn-xl Button btn-xxl

Cercle Action Buttons

We can use Floating for the button by adding a css class, like:

btn-cercle

btn-cercle btn-xxs
btn-cercle btn-xs
btn-cercle btn-s
btn-cercle btn-m
btn-cercle btn-l
btn-cercle btn-xl
btn-cercle btn-xxl

btn-cercle btn-xxs
btn-cercle btn-xs
btn-cercle btn-s
btn-cercle btn-m
btn-cercle btn-l
btn-cercle btn-xl
btn-cercle btn-xxl

Adming some variant

btn-cercle btn-xxs
btn-cercle btn-xs
btn-cercle btn-s
btn-cercle btn-m
btn-cercle btn-l
btn-cercle btn-xl
btn-cercle btn-xxl

Buttons block

We can use Class jds-d-block with button clases, like:

jds-btn, btn-primary, btn-l, jds-d-block

Block

Dropdown Action Buttons

We can make Dropdown and left, right, center Align containt.

Need to add CSS Class left-align or right-align or center-align with dropdown-content

Dropdown and Align with caret icon

We can set a caret avobe dropdown list container/items.

Dropdown Multi Level

We can set a caret avobe dropdown list container/items.

Navigation Dropdown


    
        Home
        
            Dropdown 
            
                Right Containt Link
                Link 2
                Link 3
            
        

        Advisors
        Employers
        TPAs

Some other elements