LotruDocsComponents
BlocksComing soon

Docs

Button

Button

Displays a button or a component that looks like a button.

import * as React from "react";
import { ArrowRightIcon } from "lucide-react";
 
import { Button } from "@/components/ui/button";
 
export function ButtonExample(): React.JSX.Element {
  return (
    <Button>
      Button
      <ArrowRightIcon />
    </Button>
  );
}

Installation

npx lotru@latest add ui/button

Usage

import { Button } from "@/components/ui/button";
<Button variant="outline">Button</Button>

Examples

With a different variant

import * as React from "react";
 
import { Button } from "@/components/ui/button";
import { Stack } from "@/components/ui/stack";
 
export function ButtonExample(): React.JSX.Element {
  return (
    <Stack direction="row" gap={4} flexWrap="wrap">
      <Button variant="solid">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="ghost">Button</Button>
    </Stack>
  );
}

With loading indicator

import * as React from "react";
 
import { Button } from "@/components/ui/button";
 
export function ButtonExample(): React.JSX.Element {
  return <Button isLoading loadingText="Loading..." />;
}

Previous

Badge

Next

Card