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>

Expanded

<DemoSpaceX>
  <VelvetButton @isDisclosure={{true}} @isExpanded={{true}} @variant="primary">
    Button
  </VelvetButton>
  <VelvetButton
    @isDisclosure={{true}}
    @isExpanded={{true}}
    @variant="secondary"
  >
    Button
  </VelvetButton>
  <VelvetButton @isDisclosure={{true}} @isExpanded={{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>

Signature

Element

HTMLButtonElement

Blocks

Name	Description	Type
`:default` *	The content of the button.	`[{ class: string; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the button is disabled.	`boolean`	`false`
`@isDisclosure`	Indicate if the button discloses content.	`boolean`	`false`
`@isExpanded`	Indicate if the button's disclosed content is expanded.	`boolean`	`false`
`@isLoading`	Indicate if the button should render 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"`

Arguments marked with * are required.