Flux

Item actions ​

The item actions area holds buttons or other controls that act on the item, such as edit or delete buttons.

Bas MiliusEngineer

TIP

This component is best used within an Item.

Props

is-center?: boolean
Vertically centers the actions within the item.

Slots

default
The action buttons or controls for the item.

Examples ​

Buttons

Actions are not limited to icon buttons. Use regular buttons for primary choices.

Jane DoeInvited you to collaborate

<template>
    <FluxPane style="width: min(100%, 480px)">
        <FluxItem>
            <FluxItemMedia
                is-center
                :size="40">
                <FluxBoxedIcon
                    color="info"
                    name="user-plus"
                    :size="40"/>
            </FluxItemMedia>

            <FluxItemContent is-center>
                <strong>Jane Doe</strong>
                <span style="font-size: .875rem; opacity: .6">Invited you to collaborate</span>
            </FluxItemContent>

            <FluxItemActions is-center>
                <FluxSecondaryButton label="Decline"/>
                <FluxPrimaryButton label="Accept"/>
            </FluxItemActions>
        </FluxItem>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxBoxedIcon, FluxItem, FluxItemActions, FluxItemContent, FluxItemMedia, FluxPane, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
</script>

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 480px)">
            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxAvatar
                        alt="Bas Milius"
                        :size="40"
                        src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Bas Milius</strong>
                    <span style="font-size: .875rem; opacity: .6">Engineer</span>
                </FluxItemContent>

                <FluxItemActions is-center>
                    <FluxAction
                        icon="pen"
                        aria-label="Edit"/>
                    <FluxAction
                        is-destructive
                        icon="trash"
                        aria-label="Remove"/>
                </FluxItemActions>
            </FluxItem>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxAvatar, FluxItem, FluxItemActions, FluxItemContent, FluxItemMedia, FluxPane } from '@flux-ui/components';
</script>

Used components ​