Vue Dropdown Component
Vue dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.
Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
Examples
Bind the dropdown's toggle and the dropdown menu inside <CDropdown>
, or different element that declares position: relative;
. Dropdowns can be triggered from <a>
or <button>
elements to better fit your possible requirements.
Single button
Here's how you can put them to work with either <button>
elements:
<CDropdown>
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
And with <a>
elements:
<CDropdown color="secondary" togglerText="Dropdown button">
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
The best part is you can do this with any button variant, too:
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CDropdownToggle :color="item">{{togglerText}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
Split button
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop split
for proper spacing around the dropdown caret.
We use this extra class to reduce the horizontal padding
on either side of the caret by 25% and remove the margin-left
that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CButton :color="item">{{ item }}</CButton>
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="lg">Large split button</CButton>
<CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="sm">Small split button</CButton>
<CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Dark dropdowns
Opt into darker dropdowns to match a dark navbar or custom style by set dark
property. No changes are required to the dropdown items.
<CDropdown color="secondary" dark>
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
And putting it to use in a navbar:
<CNavbar expand="lg" color-scheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarNav>
<CDropdown dark variant="nav-item">
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CNavbarNav>
</CContainer>
</CNavbar>
Directions
RTL
Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
Centered
Make the dropdown menu centered below the toggle by adding direction="center"
to the <CDropdown>
component.
<CDropdown color="secondary" direction="center">
<CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Dropup
Trigger dropdown menus above elements by adding direction="dropup"
to the <CDropdown>
component.
<CDropdown color="secondary" direction="dropup">
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropup">
<CButton color="secondary">Split dropup</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Dropup centered
Make the dropup menu centered above the toggle by adding direction="dropup-center"
to the <CDropdown>
component.
<CDropdown color="secondary" direction="dropup-center">
<CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Dropend
Trigger dropdown menus at the right of the elements by adding direction="dropend"
to the <CDropdown>
component.
<CDropdown color="secondary" direction="dropend">
<CDropdownToggle color="secondary">Dropend</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropend">
<CButton color="secondary">Split dropend</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Dropstart
Trigger dropdown menus at the left of the elements by adding direction="dropstart"
to the <CDropdown>
component.
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButtonGroup>
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="secondary">Split dropstart</CButton>
</CButtonGroup>
Responsive alignment
If you use responsive alignment, dynamic positioning is disabled.
To align right the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: end"
.
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
To align left the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: start"
.
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
In the following example we use div
instead of <CDropdownMenu>
to show <CDropdownMenu>
content.
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
Dividers
Separate groups of related menu items with a divider.
In the following example we use div
instead of <CDropdownMenu>
to show <CDropdownMenu>
content.
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
Text
Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
Forms
Put a form within a dropdown menu, or make it into a dropdown menu.
<CForm class="px-4 py-4">
<div class="mb-3">
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="[email protected]"/>
</div>
<div class="mb-3">
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
</div>
<div class="mb-3">
<CFormCheck id="dropdownCheck" label="Remember me"/>
</div>
<CButton type="submit">Sign in</CButton>
</CForm>
<CDropdownDivider/>
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
<CDropdownItem href="#">Forgot password?</CDropdownItem>
Customizing
CSS variables
Vue dropdowns use local CSS variables on .dropdown
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-dropdown-zindex: #{$zindex-dropdown};
--cui-dropdown-min-width: #{$dropdown-min-width};
--cui-dropdown-padding-x: #{$dropdown-padding-x};
--cui-dropdown-padding-y: #{$dropdown-padding-y};
--cui-dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --cui-dropdown-font-size);
--cui-dropdown-color: #{$dropdown-color};
--cui-dropdown-bg: #{$dropdown-bg};
--cui-dropdown-border-color: #{$dropdown-border-color};
--cui-dropdown-border-radius: #{$dropdown-border-radius};
--cui-dropdown-border-width: #{$dropdown-border-width};
--cui-dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--cui-dropdown-divider-bg: #{$dropdown-divider-bg};
--cui-dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--cui-dropdown-box-shadow: #{$dropdown-box-shadow};
--cui-dropdown-link-color: #{$dropdown-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-link-hover-color};
--cui-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--cui-dropdown-item-padding-x: #{$dropdown-item-padding-x};
--cui-dropdown-item-padding-y: #{$dropdown-item-padding-y};
--cui-dropdown-header-color: #{$dropdown-header-color};
--cui-dropdown-header-padding-x: #{$dropdown-header-padding-x};
--cui-dropdown-header-padding-y: #{$dropdown-header-padding-y};
Customization through CSS variables can be seen on the .dropdown-menu-dark
class where we override specific values without adding duplicate CSS selectors.
--cui-dropdown-color: #{$dropdown-dark-color};
--cui-dropdown-bg: #{$dropdown-dark-bg};
--cui-dropdown-border-color: #{$dropdown-dark-border-color};
--cui-dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--cui-dropdown-link-color: #{$dropdown-dark-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--cui-dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--cui-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--cui-dropdown-header-color: #{$dropdown-dark-header-color};
How to use CSS variables
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CDropdown :style="vars">...</CDropdown>
SASS variables
$dropdown-min-width: 10rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: var(--cui-border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
$dropdown-link-hover-bg: $gray-200 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-500 !default;
$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v4.2.6
// fusv-enable
Variables for the dark dropdown:
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $high-emphasis-inverse !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;
Variables for the CSS-based carets that indicate a dropdown's interactivity:
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;
API
CDropdown
import { CDropdown } from '@coreui/vue'
// or
import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
alignment | Set aligment of dropdown menu. | string | Alignments | { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} } | - |
auto-close | Configure the auto close behavior of the dropdown: - true - the dropdown will be closed by clicking outside or inside the dropdown menu.- false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)- 'inside' - the dropdown will be closed (only) by clicking inside the dropdown menu.- 'outside' - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean|string | - | true |
dark | Sets a darker color scheme to match a dark navbar. | boolean | - | - |
direction | Sets a specified direction and location of the dropdown menu. | string | 'center' , 'dropup' , 'dropup-center' , 'dropend' , 'dropstart' | - |
disabled | Toggle the disabled state for the component. | boolean | - | - |
offset 4.9.0+ | Offset of the dropdown menu relative to its target. | array | - | [0, 2] |
placement | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | 'auto' , 'top-end' , 'top' , 'top-start' , 'bottom-end' , 'bottom' , 'bottom-start' , 'right-start' , 'right' , 'right-end' , 'left-start' , 'left' , 'left-end' | 'bottom-start' |
popper | If you want to disable dynamic positioning set this property to true . | boolean | - | true |
trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' |
variant | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | 'btn-group' , 'dropdown' , 'input-group' , 'nav-item' | 'btn-group' |
visible | Toggle the visibility of dropdown menu component. | boolean | - | - |
Events
Event name | Description | Properties |
---|---|---|
hide | Callback fired when the component requests to be hidden. | |
show | Callback fired when the component requests to be shown. |
CDropdownHeader
import { CDropdownHeader } from '@coreui/vue'
// or
import CDropdownHeader from '@coreui/vue/src/components/dropdown/CDropdownHeader'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h6' |
CDropdownItem
import { CDropdownItem } from '@coreui/vue'
// or
import CDropdownItem from '@coreui/vue/src/components/dropdown/CDropdownItem'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Toggle the active state for the component. | boolean | - | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
disabled | Toggle the disabled state for the component. | boolean | - | - |
href | The href attribute specifies the URL of the page the link goes to. | string | - | - |
CDropdownMenu
import { CDropdownMenu } from '@coreui/vue'
// or
import CDropdownMenu from '@coreui/vue/src/components/dropdown/CDropdownMenu'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
component | Component used for the root node. Either a string to use a HTML element or a component. | string | 'div' , 'ul' | 'div' |
CDropdownToggle
import { CDropdownToggle } from '@coreui/vue'
// or
import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Toggle the active state for the component. | boolean | - | - |
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' | - |
caret | Enables pseudo element caret on toggler. | boolean | - | true |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' |
custom | Create a custom toggler which accepts any content. | boolean | - | - |
disabled | Toggle the disabled state for the component. | boolean | - | - |
size | Size the component small or large. | string | 'sm' , 'lg' | - |
split | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split className for proper spacing around the dropdown caret. | boolean | - | - |
trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.@type 'hover' | 'focus' | 'click' | Triggers | - | 'click' |
variant | Set the button variant to an outlined button or a ghost button. | string | 'ghost' , 'outline' | - |