A button wrapping slotted content.
Demos Configurable Reset Click me
Copy code Show code
<cdx-button>Click me</cdx-button>
Selected variations Default Click me
Copy code Show code
< cdx-button> Click me</ cdx-button>
Progressive Click me
Copy code Show code
< cdx-button action = " progressive" > Click me</ cdx-button>
Destructive, primary Click me
Copy code Show code
< cdx-button action = " destructive" type = " primary" > Click me</ cdx-button>
Destructive, primary, disabled Click me
Copy code Show code
< cdx-button action = " destructive" type = " primary" :disabled = " true" >
Click me
</ cdx-button>
Quiet Click me
Copy code Show code
< cdx-button type = " quiet" > Click me</ cdx-button>
Default, with icon < template>
< cdx-button>
< cdx-icon :icon = " cdxIconArrowPrevious" /> Go back
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconArrowPrevious } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'ButtonWithIcon' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconArrowPrevious
} ;
}
} ) ;
</ script>
Default, quiet, with icon < template>
< cdx-button type = " quiet" >
< cdx-icon :icon = " cdxIconDownload" /> Download
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconDownload } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'QuietButtonWithIcon' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconDownload
} ;
}
} ) ;
</ script>
Default, icon-only WARNING
Due to the lack of a descriptive text, icon-only buttons require one of the following attributes: aria-label
or aria-hidden
.
The attribute aria-label
has to be used on icon-only buttons to be understandable by screen reader users. Exceptions are buttons in component combinations, e.g. the button in the Combobox component , that are skipped by adding aria-hidden
without negatively impacting the component's functionality.
< template>
< cdx-button aria-label = " Back" >
< cdx-icon :icon = " cdxIconPrevious" />
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconPrevious } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'IconOnlyButton' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconPrevious
} ;
}
} ) ;
</ script>
Quiet, icon-only < template>
< cdx-button type = " quiet" aria-label = " Help" >
< cdx-icon :icon = " cdxIconHelp" />
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconHelp } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'QuietIconOnlyButton' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconHelp
} ;
}
} ) ;
</ script>
Usage Props Prop name Description Type Values Default action
The kind of action that will be taken on click. ButtonAction
'default'
, 'progressive'
, 'destructive'
'default'
type
Button type. See the Design Style Guide . ButtonType
'normal'
, 'primary'
, 'quiet'
'normal'
Events Event name Properties Description click
Slots Name Description Bindings default Button content