AdminUIUX

Learning

Please wait...
Let's learn and together we grow

Icon Buttons

Icon Button Types

Bootstrap icon 

            <a class="btn btn-primary" href="#" role="button"><i class="bi bi-house me-1"></i> Bootstrap icon</a>
            <button class="btn btn-theme" type="submit"><i data-feather="home" class="me-1 align-middle"></i> Feather icon</button>
            <a class="btn btn-theme btn-square" href="#" role="button"><i class="bi bi-house"></i></a>
            <button class="btn btn-theme btn-square" type="submit"><i data-feather="home" class="vm"></i></button>

Button Icon Colors


            <button type="button" class="btn btn-theme"><i data-feather="home" class="me-1 align-middle"></i> Theme</button>
            <button type="button" class="btn btn-accent"><i data-feather="home" class="me-1 align-middle"></i> Accent</button>
            <button type="button" class="btn btn-primary"><i data-feather="home" class="me-1 align-middle"></i> Primary</button>
            <button type="button" class="btn btn-secondary"><i data-feather="home" class="me-1 align-middle"></i> Secondary</button>
            <button type="button" class="btn btn-success"><i data-feather="home" class="me-1 align-middle"></i> Success</button>
            <button type="button" class="btn btn-danger"><i data-feather="home" class="me-1 align-middle"></i> Danger</button>
            <button type="button" class="btn btn-warning"><i data-feather="home" class="me-1 align-middle"></i> Warning</button>
            <button type="button" class="btn btn-info"><i data-feather="home" class="me-1 align-middle"></i> Info</button>
            <button type="button" class="btn btn-light"><i data-feather="home" class="me-1 align-middle"></i> Light</button>
            <button type="button" class="btn btn-dark"><i data-feather="home" class="me-1 align-middle"></i> Dark</button>
            <button type="button" class="btn btn-primary btn-square"><i data-feather="home" class="vm"></i></button>
            <button type="button" class="btn btn-secondary btn-square"><i data-feather="home" class="vm"></i></button>

Button Icon Outlined


            <button type="button" class="btn btn-outline-theme"><i data-feather="home" class="me-1 align-middle"></i> Theme</button>
            <button type="button" class="btn btn-outline-accent"><i data-feather="home" class="me-1 align-middle"></i> Accent</button>
            <button type="button" class="btn btn-outline-primary"><i data-feather="home" class="me-1 align-middle"></i> Primary</button>
            <button type="button" class="btn btn-outline-secondary"><i data-feather="home" class="me-1 align-middle"></i> Secondary</button>
            <button type="button" class="btn btn-outline-success"><i data-feather="home" class="me-1 align-middle"></i> Success</button>
            <button type="button" class="btn btn-outline-danger"><i data-feather="home" class="me-1 align-middle"></i> Danger</button>
            <button type="button" class="btn btn-outline-warning"><i data-feather="home" class="me-1 align-middle"></i> Warning</button>
            <button type="button" class="btn btn-outline-info"><i data-feather="home" class="me-1 align-middle"></i> Info</button>
            <button type="button" class="btn btn-outline-light"><i data-feather="home" class="me-1 align-middle"></i> Light</button>
            <button type="button" class="btn btn-outline-dark"><i data-feather="home" class="me-1 align-middle"></i> Dark</button>
            <button type="button" class="btn btn-outline-primary btn-square"><i data-feather="home" class="vm"></i></button>
            <button type="button" class="btn btn-outline-secondary btn-square"><i data-feather="home" class="vm"></i></button>

Button Icon Light Colors


            <button type="button" class="btn btn-light-color btn-theme"><i data-feather="home" class="me-1 align-middle"></i> Theme</button>
            <button type="button" class="btn btn-light-color btn-accent"><i data-feather="home" class="me-1 align-middle"></i> Accent</button>
            <button type="button" class="btn btn-light-color btn-primary"><i data-feather="home" class="me-1 align-middle"></i> Primary</button>
            <button type="button" class="btn btn-light-color btn-secondary"><i data-feather="home" class="me-1 align-middle"></i> Secondary</button>
            <button type="button" class="btn btn-light-color btn-success"><i data-feather="home" class="me-1 align-middle"></i> Success</button>
            <button type="button" class="btn btn-light-color btn-danger"><i data-feather="home" class="me-1 align-middle"></i> Danger</button>
            <button type="button" class="btn btn-light-color btn-warning"><i data-feather="home" class="me-1 align-middle"></i> Warning</button>
            <button type="button" class="btn btn-light-color btn-info"><i data-feather="home" class="me-1 align-middle"></i> Info</button>
            <button type="button" class="btn btn-light-color btn-light"><i data-feather="home" class="me-1 align-middle"></i> Light</button>
            <button type="button" class="btn btn-light-color btn-dark"><i data-feather="home" class="me-1 align-middle"></i> Dark</button>
            <button type="button" class="btn btn-light-color btn-success btn-square"><i data-feather="home" class="vm"></i></button>
            <button type="button" class="btn btn-light-color btn-danger btn-square"><i data-feather="home" class="vm"></i></button>
Button Groups
Dropdowns