Flux

Info ​

The info component is used to display short, informative messages that provide additional context or guidance to the user.

Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.

Props

color?: FluxColor
The color of the info message.

icon?: FluxIconName
The icon to display.

Slots

default
The content to display.

Examples ​

Basic

A basic info display.

Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter. 

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxInfo
                icon="circle-info">
                Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.
            </FluxInfo>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxInfo, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Multiple

Multiple info's to display.

Het Blik 60
7141 TK Groenlo
Nederland
Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter. 

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxInfoStack>
                <FluxInfo
                    icon="map-location">
                    Het Blik 60
                    <br>
                    7141 TK Groenlo
                    <br>
                    Nederland
                </FluxInfo>

                <FluxInfo
                    icon="circle-info">
                    Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.
                </FluxInfo>
            </FluxInfoStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxInfo, FluxInfoStack, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Colors

Use the color prop to convey intent.

Your changes are saved automatically as you type.
The invoice was sent to the customer.
This action cannot be undone once confirmed. 

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxInfoStack>
                <FluxInfo
                    color="info"
                    icon="circle-info">
                    Your changes are saved automatically as you type.
                </FluxInfo>

                <FluxInfo
                    color="success"
                    icon="circle-check">
                    The invoice was sent to the customer.
                </FluxInfo>

                <FluxInfo
                    color="warning"
                    icon="circle-exclamation">
                    This action cannot be undone once confirmed.
                </FluxInfo>
            </FluxInfoStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxInfo, FluxInfoStack, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components ​