VibeUI

Buttons

Beveled Corner Button

A clip-path button with a cut corner and an inner focus ring: an ordinary outline gets clipped away by that very shape.

  • button
  • bevel
  • clip-path
  • technical

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/button-042?lang=en

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "button-042" (Beveled Corner Button) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/button-042.json

Registry item: https://vibeui.ru/r/button-042.json
Installs to: components/vibeui/button-042.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A clip-path button with a cut corner and an inner focus ring: an ordinary outline gets clipped away by that very shape.

A button with its bottom-right corner cut away: the shape is carved by clip-path rather than rounded by a radius. Because clip-path also clips the focus outline, the focus ring is drawn as a double inset box-shadow. A contrasting notch sits in the corner repeating the cut, explaining that the corner is missing on purpose. Zero dependencies, one file.

## 3. How to use it
import { Button042 } from "@/components/vibeui/button-042"

<Button042 cut={12} onClick={runBuild}>Run build</Button042>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the inner focus ring via inset box-shadow: a plain outline is clipped away with the corner and disappears
- the cut size as a variable: the notch uses the same value, otherwise the two shapes drift apart
- the contrasting notch in the corner — without it the cut reads as a rendering defect
- the uppercase, letter-spaced label: it supports the technical tone of the shape
- clip-path on the button itself rather than a wrapper: otherwise hover and focus lose the shape
- the solid fill — with a cut corner the button's surface has to be opaque

## 6. You may change
- the label
- the cut size through the cut prop, in pixels
- the accent colour through the accent prop
- the onClick handler and the rest of the native button props
- the notch colour through the --vibeui-button-042-notch variable in the style block

## 7. Rules
- Do not bring a plain outline back on focus-visible: clip-path cuts it off and the button becomes unusable from the keyboard.
- Do not set cut larger than half the height: the polygon degenerates and the button loses its right edge.
- Do not add a border-radius on top of the cut — two rounding methods in one shape conflict.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/button-042.json
https://vibeui.ru/r/button-042.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-042-*. Серверный компонент. Срез задан clip-path-полигоном, величина угла — переменная --vibeui-button-042-cut, её задаёт проп cut в пикселях. Побочный эффект приёма: clip-path обрезает outline, поэтому focus-visible обнуляет outline и рисует двойное внутреннее кольцо через inset box-shadow. Контрастная засечка в углу повторяет срез тем же значением переменной.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button042Props = ComponentPropsWithoutRef<"button"> & {
  /** Величина среза угла в пикселях. */
  cut?: number
  accent?: string
}

// Идея компонента: срезанный угол через clip-path. Побочный эффект приёма —
// clip-path обрезает и системную обводку фокуса, поэтому focus-visible здесь
// нарисован внутренним кольцом inset box-shadow: оно лежит внутри фигуры
// и переживает обрезку. Второй срез повторён контрастной засечкой.
const STYLES = `
:where([data-vibeui-block="button-042"]){
--vibeui-button-042-cut:12px;
--vibeui-button-042-accent:oklch(0.45 0.11 200);
--vibeui-button-042-fg:oklch(0.98 0.02 200);
--vibeui-button-042-notch:oklch(0.82 0.17 95);
--vibeui-button-042-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-042"]{
position:relative;appearance:none;border:0;cursor:pointer;box-sizing:border-box;
display:inline-flex;align-items:center;gap:0.5rem;
height:2.75rem;padding:0 1.25rem;
background:var(--vibeui-button-042-accent);color:var(--vibeui-button-042-fg);
font-family:var(--vibeui-button-042-font);font-size:0.875rem;font-weight:700;line-height:1;
letter-spacing:0.04em;text-transform:uppercase;
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--vibeui-button-042-cut)),calc(100% - var(--vibeui-button-042-cut)) 100%,0 100%);
transition:background-color .16s ease,box-shadow .16s ease;
}
[data-vibeui-block="button-042"]:hover:not(:disabled){
background:color-mix(in oklab,var(--vibeui-button-042-accent) 84%,white);
}
/* clip-path обрезает outline, поэтому кольцо фокуса — внутреннее. */
[data-vibeui-block="button-042"]:focus-visible{
outline:0;
box-shadow:inset 0 0 0 2px var(--vibeui-button-042-fg),inset 0 0 0 4px var(--vibeui-button-042-accent);
}
[data-vibeui-block="button-042"]:disabled{cursor:not-allowed;opacity:.5}
/* Засечка повторяет срез и подсказывает, что угол убран намеренно. */
[data-vibeui-block="button-042"]::after{
content:"";position:absolute;right:0;bottom:0;
width:var(--vibeui-button-042-cut);height:var(--vibeui-button-042-cut);
background:var(--vibeui-button-042-notch);
clip-path:polygon(100% 0,100% 100%,0 100%);
opacity:.9;
}
[data-vibeui-block="button-042"] [data-part="bar"]{
flex:none;width:0.1875rem;height:0.875rem;background:var(--vibeui-button-042-notch);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-042"]{transition:none!important}}
`

/**
 * Кнопка со скошенным углом: clip-path и внутреннее кольцо фокуса.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Button042({
  cut = 12,
  accent,
  type = "button",
  className,
  style,
  children = "Запустить сборку",
  ...props
}: Button042Props) {
  const palette = {
    "--vibeui-button-042-cut": `${cut}px`,
    ...(accent ? { "--vibeui-button-042-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-042" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-042"
        className={className}
        style={palette}
      >
        <span data-part="bar" aria-hidden="true" />
        {children}
      </button>
    </>
  )
}