'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
red
green
blue
teal
pink
purple
cyan
orange
yellow
'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 |