Tile
A Tile used to display things like paint or material swatches, or anything that requires an image with subtext.
React
Import
import { Tile } from '@hover/blueprint';
A Tile used to display things like paint or material swatches, or anything that requires an image with subtext.
import { Tile } from '@hover/blueprint';
() => { const CustomRadio = props => { const { name, color, ...radioProps } = props; const { getLabelProps, getRootProps, getInputProps, state: { isChecked }, } = useRadio({ ...radioProps, value: name }); return ( <Tile as="label" colorScheme="dark" isSelected={isChecked} label={name} labelProps={getLabelProps()} subLabel="Optional sub label" tileProps={{ bgColor: color }} {...getRootProps} {...props} > <VisuallyHidden> <input {...getInputProps()} /> </VisuallyHidden> </Tile> ); }; return ( <RadioGroup display={{ base: 'flex', tablet: 'grid' }} flexDirection="row" gap={{ base: '200', tablet: '500' }} gridTemplateColumns={{ base: 'repeat(auto-fill, minmax(125px, 1fr))' }} > <CustomRadio name="label 1" color="primary.600" /> <CustomRadio name="label 2" color="brandOrange.600" /> </RadioGroup> );};
() => { return ( <Grid gridTemplateColumns={{ base: 'repeat(auto-fill, minmax(125px, 1fr))' }} > <Tile as="label" label="A Tile" isSelected selectionIndicator={<Icon icon={hRefresh} key="regenerate" />} tileProps={{ bgColor: 'primary.600' }} /> </Grid> );};
() => { return ( <Grid gridTemplateColumns={{ base: 'repeat(auto-fill, minmax(125px, 1fr))' }} > <Tile as="label" label="A Tile" isLoading tileProps={{ bgColor: 'primary.600' }} /> </Grid> );};