ボタン
ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。
import { Button } from "@/components/ui/button";使用例
import { HStack } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
export default function App() {
return (
<HStack gap={4}>
<Button>ボタン</Button>
<Button variant="outline">ボタン</Button>
<Button variant="text">ボタン</Button>
</HStack>
);
}
カラーパレット
colorPalette属性で色を変更する例。
import { HStack } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
export default function App() {
return (
<HStack gap={4}>
<Button colorPalette="red">ボタン</Button>
<Button variant="outline" colorPalette="light-blue">
ボタン
</Button>
<Button variant="text" colorPalette="lime">
ボタン
</Button>
</HStack>
);
}