Get Started

Buttons

Astryx documentation

Button triggers an action, submits a form, or opens a link. Buttons are flat. Use onClick for actions: loading feedback and duplicate-click prevention are automatic while an asynchronous handler is pending.

This is a LongLink-specific component.

longlink docs --component "Button"
Button [Action]
Props and types
type ViewMouseEvent = Omit<MouseEvent, 'currentTarget'> & { currentTarget: HTMLElement; nativeEvent: MouseEvent };
​
type ButtonProps = {
    label: string;
    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
    size?: 'sm' | 'md' | 'lg';
    type?: 'button' | 'submit' | 'reset';
    name?: string;
    value?: string | number | readonly string[];
    form?: string;
    icon?: ViewNode;
    endContent?: ViewNode;
    tooltip?: string;
    width?: number | string;
    isDisabled?: boolean;
    href?: string;
    onClick?: (event: ViewMouseEvent) => void | Promise<void>;
};
​
declare function Button(props: ButtonProps): React.JSX.Element;
​
declare function ButtonGroup(props: {
    children?: ViewNode;
    label: string;
    orientation?: 'horizontal' | 'vertical';
    size?: 'sm' | 'md' | 'lg';
    isDisabled?: boolean;
}): React.JSX.Element;
function Example() {
  return (
    <Button
      label="Save"
      onClick={async () => {
        await request('/api/settings', {
          method: 'PATCH',
          json: { enabled: true },
        });
      }}
    />
  );
}
function Example() {
  return (
    <ButtonGroup label="Actions">
      <Button label="Save" />
      <Button label="Cancel" variant="ghost" />
    </ButtonGroup>
  );
}