Grid Button

Last updated: 3.0.0 (04/07/2024)

As of Valence 3, this component now imports from @valence-ui/core.

The Grid Button is a large square button with a central icon and room for short descriptive text underneath. It is, as the name suggests, best used within a Grid system.

Usage

import { GridButton } from "@valence-ui/core";
import { Icon123 } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <GridButton
            icon={<Icon123 />}
        >
            Grid button
        </GridButton>
    )
}

Change icon position

import { GridButton } from "@valence-ui/core";
import { Icon123 } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <GridButton
            icon={<Icon123 />}
            iconPosition="bottom"
        >
            Grid button
        </GridButton>
    )
}

---

Props

Extends TextButtonProps.

Property	Type	Description
icon (required)	ReactNode	The icon to include with this button.
iconPosition	"top" | "bottom"	The position of the icon relative to the text. Defaults to "top".

Changelog

• 3.0.0: now imports from @valence-ui/core, not @valence-ui/app.