Flush code
Dense docs and changelogs: the same review snippet with the code running edge to edge.
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>
);
}
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.