Documentação
Button
Exibe um botão ou um componente que se parece com um botão.
Carregando…
"use client";
import { Button } from "@blips/ui/components/button";
export default function ButtonDemo() {
return <Button>Button</Button>;
}
Instalação
Uso
import { Button } from "@blips/ui/components/button"<Button variant="outline">Button</Button>Exemplos
Tamanho
Use a prop size para alterar o tamanho do botão.
Carregando…
import { Button } from "@blips/ui/components/button";
import { ArrowUpRight } from "@phosphor-icons/react";
export default function ButtonSize() {
return (
<div className="flex flex-col items-start gap-8 sm:flex-row">
<div className="flex items-start gap-2">
<Button size="sm" variant="outline">
Small
</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
<ArrowUpRight />
</Button>
</div>
<div className="flex items-start gap-2">
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
<ArrowUpRight />
</Button>
</div>
<div className="flex items-start gap-2">
<Button variant="outline" size="lg">
Large
</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
<ArrowUpRight />
</Button>
</div>
</div>
);
}
Default
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonDefault() {
return <Button>Button</Button>;
}
Outline
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonOutline() {
return <Button variant="outline">Outline</Button>;
}
Secondary
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonSecondary() {
return <Button variant="secondary">Secondary</Button>;
}
Ghost
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonGhost() {
return <Button variant="ghost">Ghost</Button>;
}
Destructive
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonDestructive() {
return <Button variant="destructive">Destructive</Button>;
}
Link
Carregando…
import { Button } from "@blips/ui/components/button";
export default function ButtonLink() {
return <Button variant="link">Link</Button>;
}
Icon
Carregando…
import { Button } from "@blips/ui/components/button";
import { ArrowCircleUp } from "@phosphor-icons/react";
export default function ButtonIcon() {
return (
<Button variant="outline" size="icon">
<ArrowCircleUp />
</Button>
);
}
Com ícone
Lembre-se de adicionar o atributo data-icon="inline-start" ou data-icon="inline-end" ao ícone para o espaçamento correto.
Carregando…
import { Button } from "@blips/ui/components/button";
import { GitBranch } from "@phosphor-icons/react";
export default function ButtonWithIcon() {
return (
<Button variant="outline" size="sm">
<GitBranch /> New Branch
</Button>
);
}
Arredondado
Use a classe rounded-full para deixar o botão arredondado.
Carregando…
import { Button } from "@blips/ui/components/button";
import { ArrowUp } from "@phosphor-icons/react";
export default function ButtonRounded() {
return (
<div className="flex flex-col gap-8">
<Button variant="outline" size="icon" className="rounded-full">
<ArrowUp />
</Button>
</div>
);
}
Button Group
Para criar um grupo de botões, use o componente ButtonGroup. Consulte a documentação de Button Group para mais detalhes.
Carregando…
"use client";
import { Button } from "@blips/ui/components/button";
import { ButtonGroup } from "@blips/ui/components/button-group";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@blips/ui/components/dropdown-menu";
import {
Archive,
ArrowLeft,
CalendarPlus,
Clock,
Funnel,
EnvelopeSimple,
DotsThree,
Tag,
Trash,
} from "@phosphor-icons/react";
import * as React from "react";
export default function ButtonGroupDemo() {
const [label, setLabel] = React.useState("personal");
return (
<ButtonGroup>
<ButtonGroup className="hidden sm:flex">
<Button variant="outline" size="icon" aria-label="Go Back">
<ArrowLeft />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Archive</Button>
<Button variant="outline">Report</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Snooze</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" aria-label="More Options">
<DotsThree />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-52">
<DropdownMenuGroup>
<DropdownMenuItem>
<EnvelopeSimple />
Mark as Read
</DropdownMenuItem>
<DropdownMenuItem>
<Archive />
Archive
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Clock />
Snooze
</DropdownMenuItem>
<DropdownMenuItem>
<CalendarPlus />
Add to Calendar
</DropdownMenuItem>
<DropdownMenuItem>
<Funnel />
Add to List
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Tag />
Label As...
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuRadioGroup
value={label}
onValueChange={setLabel}
>
<DropdownMenuRadioItem value="personal">
Personal
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="work">
Work
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="other">
Other
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<Trash />
Trash
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</ButtonGroup>
</ButtonGroup>
);
}
Referência da API
Button
O componente Button é um wrapper em torno do elemento button que adiciona uma variedade de estilos e funcionalidades.