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>
Progressive, with icon < template>
< cdx-button action = " progressive" >
< cdx-icon :icon = " cdxIconAdd" /> Add new
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconAdd } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'ProgressiveButtonWithIcon' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconAdd
} ;
}
} ) ;
</ script>
Destructive, primary, with icon < template>
< cdx-button action = " destructive" type = " primary" >
< cdx-icon :icon = " cdxIconTrash" /> Delete
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconTrash } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'DestructivePrimaryButtonWithIcon' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconTrash
} ;
}
} ) ;
</ script>
Default, quiet, with icon < template>
< cdx-button action = " destructive" type = " primary" >
< cdx-icon :icon = " cdxIconTrash" /> Delete
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconTrash } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'DestructivePrimaryButtonWithIcon' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconTrash
} ;
}
} ) ;
</ script>
Default, icon only < template>
< cdx-button>
< cdx-icon :icon = " cdxIconPrevious" icon-label = " Back" />
</ 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>
Progressive, primary, icon only < template>
< cdx-button action = " progressive" type = " primary" >
< cdx-icon :icon = " cdxIconCheckAll" icon-label = " Mark all as read" />
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconCheckAll } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'ProgressivePrimaryIconOnlyButton' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconCheckAll
} ;
}
} ) ;
</ script>
Destructive, icon only < template>
< cdx-button action = " destructive" >
< cdx-icon :icon = " cdxIconLock" icon-label = " Lock" />
</ cdx-button>
</ template>
< script lang = " ts" >
import { defineComponent } from 'vue' ;
import { CdxButton, CdxIcon } from '@wikimedia/codex' ;
import { cdxIconLock } from '@wikimedia/codex-icons' ;
export default defineComponent ( {
name : 'DestructiveIconOnlyButton' ,
components : {
CdxButton,
CdxIcon
} ,
setup ( ) {
return {
cdxIconLock
} ;
}
} ) ;
</ script>
Quiet, icon only < template>
< cdx-button type = " quiet" >
< cdx-icon :icon = " cdxIconHelp" icon-label = " Help" />
</ 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