Browse files

feat(modal): Add props to change the variant of the default modal but…

…tons (#1004)

* Add props to set variant of modal footer buttons

* update docs
  • Loading branch information...
tzagorni authored and tmorehouse committed Sep 6, 2017
1 parent 56a4e5e commit 36acf4e64d85046218cad8480cb22f1d1996d7df
Showing with 12 additions and 3 deletions.
  1. +2 −1 docs/components/modal/
  2. +10 −2 lib/components/modal.vue
@@ -61,7 +61,8 @@ They support a number of use cases from user notification to completely custom c
`<b-modal>`, by default, has an **OK** and a **Close** button in the footer. These buttons can
be customized by setting various props on the component. You can customize the size of the buttons,
disable the **OK** button, hide the **Close** button (i.e. OK Only), and provide custom
disable the **OK** button, hide the **Close** button (i.e. OK Only), choose a variant (e.g. `danger`
for a red OK button) using the `ok-variant` and `close-variant` props, and provide custom
button content using the `ok-title` and `close-title` props, or using the named
slots `modal-ok` and `modal-cancel`.
@@ -55,11 +55,11 @@
<footer class="modal-footer" ref="footer" v-if="!hideFooter">
<slot name="modal-footer">
<b-btn v-if="!okOnly"
><slot name="modal-cancel">{{ closeTitle }}</slot></b-btn>
<b-btn variant="primary"
<b-btn :variant="okVariant"
@@ -239,6 +239,14 @@
okTitle: {
type: String,
default: 'OK'
closeVariant: {
type: String,
default: 'secondary'
okVariant: {
type: String,
default: 'primary'
methods: {

0 comments on commit 36acf4e

Please sign in to comment.