Codex Direction:
Button #
A button wrapping slotted content.
Demos #
Configurable #
<cdx-button>Click me</cdx-button>| Name | Value |
|---|---|
| Props | |
action | |
type | |
disabled | |
| Slots | |
default | |
Selected variations #
Default #
template
<cdx-button>Click me</cdx-button>
Progressive #
template
<cdx-button action="progressive">Click me</cdx-button>
Destructive, primary #
template
<cdx-button action="destructive" type="primary">Click me</cdx-button>
Destructive, primary, disabled #
template
<cdx-button
action="destructive"
type="primary"
:disabled="true"
>
Click me
</cdx-button>
Quiet #
template
<cdx-button type="quiet">Click me</cdx-button>
Default, with icon #
vue
<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 #
vue
<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.
vue
<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 #
vue
<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 |