Button

Button

The Button component is used to trigger an action or event. It supports multiple colors, visual variants, sizes, icons, disabled states, and full-width layouts.

import Button from "rocksolidjs/Button";

export default function Example() {
  return <Button>Click me</Button>;
}

Examples

Colors

Use the color prop to customize the semantic color of the Button.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="flex flex-wrap gap-4">
      <Button color="default">Default</Button>
      <Button color="success">Success</Button>
      <Button color="warning">Warning</Button>
      <Button color="info">Info</Button>
      <Button color="error">Error</Button>
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the Button.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap gap-4">
        <Button variant="solid" color="default">
          Solid
        </Button>
        <Button variant="solid" color="success">
          Solid
        </Button>
        <Button variant="solid" color="error">
          Solid
        </Button>
      </div>
      <div class="flex flex-wrap gap-4">
        <Button variant="outlined" color="default">
          Outlined
        </Button>
        <Button variant="outlined" color="success">
          Outlined
        </Button>
        <Button variant="outlined" color="error">
          Outlined
        </Button>
      </div>
      <div class="flex flex-wrap gap-4">
        <Button variant="filled" color="default">
          Filled
        </Button>
        <Button variant="filled" color="success">
          Filled
        </Button>
        <Button variant="filled" color="error">
          Filled
        </Button>
      </div>
      <div class="flex flex-wrap gap-4">
        <Button variant="ghost" color="default">
          Text
        </Button>
        <Button variant="ghost" color="success">
          Text
        </Button>
        <Button variant="ghost" color="error">
          Text
        </Button>
      </div>
    </div>
  );
}

Sizes

Use the size prop to control the size of the Button.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap gap-4">
        <Button size="small" color="default">
          Small
        </Button>
        <Button size="small" color="success">
          Small
        </Button>
        <Button size="small" color="error">
          Small
        </Button>
      </div>
      <div class="flex flex-wrap gap-4">
        <Button size="medium" color="default">
          Medium
        </Button>
        <Button size="medium" color="success">
          Medium
        </Button>
        <Button size="medium" color="error">
          Medium
        </Button>
      </div>
      <div class="flex flex-wrap gap-4">
        <Button size="large" color="default">
          Large
        </Button>
        <Button size="large" color="success">
          Large
        </Button>
        <Button size="large" color="error">
          Large
        </Button>
      </div>
    </div>
  );
}

Icons

Use the startIcon and endIcon props to add icons before or after the Button content.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="flex flex-wrap gap-4">
      <Button
        startIcon={<span aria-hidden>+</span>}
        >
        Start content
      </Button>
      <Button
        endIcon={<span aria-hidden>→</span>}
      >
        End content
      </Button>
      <Button
        startIcon={<span aria-hidden>+</span>}
        endIcon={<span aria-hidden>→</span>}
      >
        Both
      </Button>
    </div>
  );
}

Disabled

Use the disabled prop to prevent the Button from being interacted with.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="flex flex-wrap gap-4">
      <Button disabled>
        Disabled Solid
      </Button>
      <Button variant="outlined" disabled>
        Disabled Outlined
      </Button>
      <Button variant="filled" disabled>
        Disabled Filled
      </Button>
      <Button variant="ghost" disabled>
        Disabled Text
      </Button>
    </div>
  );
}

Full Width

Use the fullWidth prop to make the Button take up the full available width.

import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <div class="w-full">
      <Button fullWidth>
        Full width button
      </Button>
    </div>
  );
}

Accessibility

  • Use descriptive text that clearly communicates the Button’s action.
  • Do not rely on color alone to communicate meaning or state.
  • Use the disabled prop when an action is unavailable.
  • When using startIcon or endIcon for decorative icons, set aria-hidden="true" on the icon so it is hidden from assistive technologies.

API

Button

The Button component supports customizable colors, variants, sizes, icons, disabled states, and full-width layouts.

Prop Type Required Default Description
children JSXElement No — The content to display inside the Button.
class string No — Additional CSS class name(s) applied to the Button.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color of the Button.
disabled boolean No false Disables the Button and prevents user interaction.
endIcon JSXElement No — Displays an element after the Button content.
fullWidth boolean No false Makes the Button span the full available width.
size "small" | "medium" | "large" No "medium" Controls the size of the Button.
slotProps { startIcon?: object; endIcon?: object; } No — Provides props to customize the Button slots.
  • startIcon — Props for the start icon slot.
  • endIcon — Props for the end icon slot.
startIcon JSXElement No — Displays an element before the Button content.
variant "solid" | "filled" | "outlined" | "ghost" No "solid" Controls the visual style of the Button.
  • IconButton — Use IconButton for actions that are represented by an icon without visible text.