Icon Button

Variants

<DemoSpaceX>
  <VelvetIconButton @variant="primary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @variant="secondary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @variant="ghost">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Sizes

<DemoSpaceX>
  <VelvetIconButton @size="xs">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @size="sm">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @size="md">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @size="lg">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Round

<DemoSpaceX>
  <VelvetIconButton @isRound={{true}} @variant="primary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isRound={{true}} @variant="secondary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isRound={{true}} @variant="ghost">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Disabled

<DemoSpaceX>
  <VelvetIconButton @isDisabled={{true}} @variant="primary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isDisabled={{true}} @variant="secondary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isDisabled={{true}} @variant="ghost">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Loading

<DemoSpaceX>
  <VelvetIconButton @isLoading={{true}} @variant="primary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isLoading={{true}} @variant="secondary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isLoading={{true}} @variant="ghost">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Disclosure

<DemoSpaceX>
  <VelvetIconButton @isDisclosure={{true}} @variant="primary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isDisclosure={{true}} @variant="secondary">
    <DemoMenuIcon />
  </VelvetIconButton>
  <VelvetIconButton @isDisclosure={{true}} @variant="ghost">
    <DemoMenuIcon />
  </VelvetIconButton>
</DemoSpaceX>

Renderless

<DemoSpaceX>
  <VelvetIconButton @isRenderless={{true}} @variant="primary" as |iconButton|>
    <a class={{iconButton.class}} href="#renderless">
      <DemoMenuIcon />
    </a>
  </VelvetIconButton>
  <VelvetIconButton @isRenderless={{true}} @variant="secondary" as |iconButton|>
    <a class={{iconButton.class}} href="#renderless">
      <DemoMenuIcon />
    </a>
  </VelvetIconButton>
  <VelvetIconButton @isRenderless={{true}} @variant="ghost" as |iconButton|>
    <a class={{iconButton.class}} href="#renderless">
      <DemoMenuIcon />
    </a>
  </VelvetIconButton>
</DemoSpaceX>

Examples

Handle Click Events

Edit this demo

Use the @onClick argument to handle click events.

<VelvetIconButton @onClick={{this.onClick}}>
  <DemoMenuIcon />
</VelvetIconButton>

Arguments

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