Dark flush
Terminal-style review blocks: dark, edge to edge, with the change history in place.
Get Pro to installPro4 blocksReact, Vue and Figma
SaveBar.tsx
import { SkeuomorphicButton } from '@orvain/react';
type SaveBarProps = { onSave: () => void };
type SaveBarProps = { dirty: boolean; onSave: () => void };
export function SaveBar({ onSave }: SaveBarProps) {
export function SaveBar({ dirty, onSave }: SaveBarProps) {
return (
<SkeuomorphicButton variant="secondary" size="md" onClick={onSave}>
<SkeuomorphicButton variant="primary" intent="brand" size="md" pill disabled={!dirty} onClick={onSave}>
Save changes
</SkeuomorphicButton>
);
}
Resolved by Jon·
More in Snippet code#
When to use#
- Documentation whose next step is the reader pasting the code into their own file.
- A changelog showing exactly what a migration changes.
- An install command on a landing page, where the command is the proof.
- Support answers that hand over a config file the reader has to keep intact.
The whole set, with its codePro
Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.