Styled Flex

Last updated: 2.0.0 (21/01/2024)

The Styled Flex is a basic wrapper around the Flex component that provides basic theme-controlled styling props, such as the variant, size and radius props.

Usage

import { StyledFlex } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <StyledFlex
            variant="filled"
            size="xs"
            radius="xl"
            shadow
        >
            // Flex children...
        </StyledFlex>
    )
}

Props

Extends FlexProps.

Property	Type	Description
variant	FillVariant	Sets the styling variant. Defaults to the theme default variant.
size	ComponentSize	Sets the size of this component. Defaults to the theme default size.
radius	ComponentSize	Sets the radius of this component. Defaults to the theme default border size.
shadow	boolean	Whether to include a shadow underneath this component. Will display the theme default shadow.