# Card Actions

Use b-card-actions component to create card with collapse, refresh and close actions.

# Default

b-card-actions component is same as BootstrapVue's card (opens new window) component.


As refresh action is used for async data fetching, you have to set card's showLoading property to false once you are done with fetching data.

  <b-card-actions title="Card w/ All Actions" @refresh="refreshStop('cardAction')" ref="cardAction">
    <span>You can use default slot to render your content inside card.</span>

export default {
  methods: {
    // stop refreshing card in 3 sec
    refreshStop(cardName) {
      setTimeout(() => {
        this.$refs[cardName].showLoading = false
      }, 3000)

You can check demo in "Card Actions" card on this (opens new window) page.

# Specific Action

You can also use only specific action if you don't want to use all actions. Just pass the name of action with action- prefix as prop and you will get that specific action.

e.g. action-close


  <b-card-actions title="Card w/ Collapse Action Only" action-collapse>
    <span>You can use default slot to render your content inside card.</span>

You can check demo in "Collapsible", "Refresh Content" and "Remove Card" card on this (opens new window) page.

# Component API

# Props

Name Description Type Parameters Default
collapsed make card collapsed from start boolean true/false false
noActions Remove all actions from component. (If you are using this prop just use b-card component) boolean true/false false
actionCollapse Enable Collapse action boolean true/false false
actionRefresh Enable refresh action boolean true/false false
actionClose Enable close action boolean true/false false

# Events

Name Description
collapse Collapse action triggered
refresh Refresh action triggered
close close action triggered

# Slots

Name Description Slot Props
description default slot None
Vue 3 update 📣 ×

We are glad to announce updates on Vue 3 support. You can read common FAQs regarding Vue 3 update here.