'use client'
import { Button } from '@saas-ui/react'
export const ButtonBasic = () => {
return <Button>Button</Button>
}
Anatomy
import { Button } from '@saas-ui/react/button'
import { ButtonGroup } from '@saas-ui/react/button-group'<Button>Click me</Button>Examples
Sizes
Use the size prop to change the size of the button. You can set the value to
xs, sm, md, or lg.
'use client'
import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
export const ButtonWithSizes = () => {
return (
<HStack wrap="wrap" gap="6">
<Button size="xs">Button (xs)</Button>
<Button size="sm">Button (sm)</Button>
<Button size="md">Button (md)</Button>
<Button size="lg">Button (lg)</Button>
<Button size="xl">Button (xl)</Button>
</HStack>
)
}
Variants
Use the variant prop to change the visual style of the Button. You can set the
value to solid, subtle, outline, ghost or plain
'use client'
import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
export const ButtonWithVariants = () => {
return (
<HStack wrap="wrap" gap="6">
<Button variant="glass">Glass</Button>
<Button variant="solid">Solid</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="surface">Surface</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="plain">Plain</Button>
</HStack>
)
}
Icon
Use icons within a button
'use client'
import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
import { RiArrowRightLine, RiMailLine } from 'react-icons/ri'
export const ButtonWithIcons = () => {
return (
<HStack>
<Button colorPalette="teal" variant="solid">
<RiMailLine /> Email
</Button>
<Button colorPalette="teal" variant="outline">
Call us <RiArrowRightLine />
</Button>
</HStack>
)
}
Color
Use the colorPalette prop to change the color of the button
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
'use client'
import { Stack, Text } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const ButtonWithColors = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack align="center" key={colorPalette} direction="row" gap="10">
<Text minW="8ch">{colorPalette}</Text>
<Button colorPalette={colorPalette}>Button</Button>
<Button colorPalette={colorPalette} variant="outline">
Button
</Button>
<Button colorPalette={colorPalette} variant="surface">
Button
</Button>
<Button colorPalette={colorPalette} variant="subtle">
Button
</Button>
</Stack>
))}
</Stack>
)
}
Loading
Use the loading and loadingText prop to show a loading spinner
'use client'
import { Stack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
export const ButtonWithLoading = () => {
return (
<Stack direction="row" gap="4" align="center">
<Button loading>Click me</Button>
<Button loading loadingText="Saving...">
Click me
</Button>
</Stack>
)
}
ButtonGroup
Use the ButtonGroup component to group buttons together
'use client'
import { Button, ButtonGroup, IconButton } from '@saas-ui/react'
import { LuChevronDown } from 'react-icons/lu'
export const ButtonWithGroup = () => {
return (
<ButtonGroup attached>
<Button variant="outline" size="sm">
Button
</Button>
<IconButton variant="outline" size="sm">
<LuChevronDown />
</IconButton>
</ButtonGroup>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
variant | 'surface' | 'solid' | 'subtle' | 'glass' | 'surface' | 'outline' | 'ghost' | 'plain'The variant of the component |
loading | boolean | |
loadingText | React.ReactNode |