Button

Variants

<DemoSpaceX>
  <VelvetButton @variant="primary">Button</VelvetButton>
  <VelvetButton @variant="secondary">Button</VelvetButton>
  <VelvetButton @variant="ghost">Button</VelvetButton>
</DemoSpaceX>

Sizes

<DemoSpaceX>
  <VelvetButton @size="xs">Button</VelvetButton>
  <VelvetButton @size="sm">Button</VelvetButton>
  <VelvetButton @size="md">Button</VelvetButton>
  <VelvetButton @size="lg">Button</VelvetButton>
</DemoSpaceX>

Pill

<DemoSpaceX>
  <VelvetButton @isPill={{true}} @variant="primary">Button</VelvetButton>
  <VelvetButton @isPill={{true}} @variant="secondary">Button</VelvetButton>
  <VelvetButton @isPill={{true}} @variant="ghost">Button</VelvetButton>
</DemoSpaceX>

Disabled

<DemoSpaceX>
  <VelvetButton @isDisabled={{true}} @variant="primary">Button</VelvetButton>
  <VelvetButton @isDisabled={{true}} @variant="secondary">Button</VelvetButton>
  <VelvetButton @isDisabled={{true}} @variant="ghost">Button</VelvetButton>
</DemoSpaceX>

Loading

<DemoSpaceX>
  <VelvetButton @isLoading={{true}} @variant="primary">Button</VelvetButton>
  <VelvetButton @isLoading={{true}} @variant="secondary">Button</VelvetButton>
  <VelvetButton @isLoading={{true}} @variant="ghost">Button</VelvetButton>
</DemoSpaceX>

Disclosure

<DemoSpaceX>
  <VelvetButton @isDisclosure={{true}} @variant="primary">
    Button
  </VelvetButton>
  <VelvetButton @isDisclosure={{true}} @variant="secondary">
    Button
  </VelvetButton>
  <VelvetButton @isDisclosure={{true}} @variant="ghost">
    Button
  </VelvetButton>
</DemoSpaceX>

Renderless

Link Link Link

<DemoSpaceX>
  <VelvetButton @isRenderless={{true}} @variant="primary" as |button|>
    <a class={{button.class}} href="#renderless">Link</a>
  </VelvetButton>
  <VelvetButton @isRenderless={{true}} @variant="secondary" as |button|>
    <a class={{button.class}} href="#renderless">Link</a>
  </VelvetButton>
  <VelvetButton @isRenderless={{true}} @variant="ghost" as |button|>
    <a class={{button.class}} href="#renderless">Link</a>
  </VelvetButton>
</DemoSpaceX>

Examples

Handle Click Events

Edit this demo

Use the @onClick argument to handle click events.

<VelvetButton @onClick={{this.onClick}}>
  Click Me!
</VelvetButton>

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the button is disabled.	`boolean`	`false`
`@isDisclosure`	Indicate if the button discloses content.	`boolean`	`false`
`@isLoading`	Indicate if the button should display a loading state.	`boolean`	`false`
`@isPill`	Indicate if the button is pill shaped.	`boolean`	`false`
`@isRenderless`	Make the button renderless.	`boolean`	`false`
`@onClick`	Handle the button's `click` event.	`(event: MouseEvent) => void`	`undefined`
`@size`	The size of the button.	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`
`@type`	The type of the button.	`"button" \| "reset" \| "submit"`	`"button"`
`@variant`	The appearance of the button.	`string \| "primary"`	`"primary"`