FCrudButton är deprekerad och ersatt med FTableButton för tabeller eller knapp för andra användningsområden.

Proparna

• action är ersatt med slot attributes updateItem() respektive deleteItem().
• icon är ersatt med prop icon på FTableButton samt FIcon för övriga användningsområden.
• label är ersatt med prop label på FTableButton samt vanlig text i knapp för övriga användningsområden.

Tabell

 <f-crud-dataset>
-    <template #default>
+    <template #default="{ updateItem, deleteItem }">
         <f-interactive-table :rows>
             <template #caption> Tabell </template>
             <template #default="{ row }">
                 <f-table-column title="Åtgärder">
-                    <f-crud-button action="modify" :item="row" icon>
-                        Ändra {{ row.name }}
-                    </f-crud-button>
-                    <f-crud-button action="delete" :item="row" icon>
-                        Ta bort {{ row.name }}
-                    </f-crud-button>
+                    <f-table-button icon="pen" @click="updateItem(item)">
+                        Ändra {{ item.name }}
+                    </f-table-button>
+                    <f-table-button icon="trashcan" @click="deleteItem(item)">
+                        Ta bort {{ item.name }}
+                    </f-table-button>
                 </f-table-column>
             </template>
         </f-interactive-table>

Lista och övrigt

 <f-crud-dataset>
-    <template #default>
+    <template #default="{ updateItem, deleteItem }">
         <f-list :items>
             <template #default="{ item }">
-                <f-crud-button action="modify" :item icon>
-                    Ändra {{ item.name }}
-                </f-crud-button>
-                <f-crud-button action="delete" :item icon>
-                    Ta bort {{ item.name }}
-                </f-crud-button>
+                <button
+                    type="button"
+                    class="button button--small button--tertiary"
+                    @click="updateItem(item)"
+                >
+                    <f-icon name="pen">
+                        <title>Ändra {{ item.name }}</title>
+                    </f-icon>
+                </button>
+                <button
+                    type="button"
+                    class="button button--small button--tertiary"
+                    @click="deleteItem(item)"
+                >
+                    <f-icon name="pen">
+                        <title>Ta bort {{ item.name }}</title>
+                    </f-icon>
+                </button>
             </template>
         </f-list>
     </template>

API

Props

action: string

The action to be performed by the button. Must be one of the following values: "delete" or "modify".

icon: boolean Optional

Determines if an icon should be displayed on the button.

item: object

The item that the action will be performed on.

label: boolean Optional

Determines if the button should display a label. If false, the button will use a visually hidden text for accessibility.

Slots

default

Slot used to provide custom content for the button text.