Button
This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.
A component for displaying button-style links.
↓
Preview
<Flex layout="cluster" g="15"> <Button href="###" variant="fill"> Button </Button> <Button href="###" variant="outline"> Outline </Button></Flex>Usage
Provided as Button (c--button) from the @lism-css/ui package.
Import
import { Button } from '@lism-css/ui/react';Props
| Property | Description |
|---|---|
variant(optional) | Outputs the c--button--{variant} class. Two styles are available: fill and outline. |
Source Code
The source code is available on GitHub.
Examples
↓
Usage examples of
Button<Flex g="15"> <Button href="###">Button</Button> <Button href="###" bgc="brand" bdrs="10"> Button </Button> <Button href="###" bgc="#d13d5e" bdrs="99"> <Icon icon="cart" /> Button </Button></Flex>variant: outline
↓
Usage example of
outline<Flex g="15"> <Button href="###">Button</Button> <Button href="###" variant="outline" c="brand" bdrs="10"> Button </Button> <Button href="###" variant="outline" c="#d13d5e" bdrs="99"> <Icon icon="cart" /> Button </Button></Flex>Using icons
↓
Using icons
<Cluster g="15"> <Button href="###" g="5" bdrs="10"> <Icon icon="cart" style={{ translate: '-25% 0' }} /> <span>Button</span> </Button> <Button href="###" variant="outline" g="5" bdrs="10"> <span>Button</span> <Icon icon={ArrowRightIcon} style={{ translate: '25% 0' }} /> </Button> <Button href="###" w="fit" px="10" py="10" lh="1" bdrs="10"> <Icon icon={{ as: ShoppingCartSimpleIcon, weight: 'fill' }} fz="l" /> </Button></Cluster>Adjusting size
↓
Adjusting size
<Button href="###" w="fit" bdrs="10"> Button</Button><Button href="###" max-w="12em" py="15" fz="l" bdrs="10"> Button</Button>Aligning icons to the edge using Grid
Specifying layout='grid' switches the layout to a grid layout (l--grid class).
This allows you to create a layout where icons are pinned to the edges of the button.
↓
Preview
<Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <Icon icon="cart" /> <span>Button</span></Button><Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button><Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <Icon icon="cart" /> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button>Opt-in styles
hov="reverse"
An example of adding a -hov class that swaps the fill and outline styles on hover.
↓
Example
.-hov\:reverse { --hov-c: var(--bgc); --hov-bgc: var(--c); &:where(.c--button--fill) { --hov-bgc: transparent; } &:where(.c--button--outline) { --hov-c: var(--base); } @media (any-hover: hover) { &:hover { background-color: var(--hov-bgc) !important; color: var(--hov-c) !important; } }}Without @lism-css/ui
An example of building a Button using only lism-css, without @lism-css/ui.
↓
Preview
<Flex g="15"> <Link href="###" d="inline-flex" w="fit" td="none" c="base" bgc="text" lh="s" py="10" px="20" bdrs="20" hov="-o">Button</Link> <Link href="###" d="inline-flex" w="fit" td="none" c="inherit" bd lh="s" py="10" px="20" bdrs="20" hov="-o">Button</Link></Flex><Grid as="a" href="###" gtc="1em 1fr 1em" ji="center" ai="center" px="15" py="10" g="30" w="16rem" td="none" bgc="text" c="base" bdrs="20" hov="neutral"> <Lism as="span" gc="2">Button</Lism> <Icon icon={ArrowRightIcon}/></Grid>