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" />
  <VelvetIconButton @isDisclosure={{true}} @variant="secondary" />
  <VelvetIconButton @isDisclosure={{true}} @variant="ghost" />
</DemoSpaceX>

Expanded

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

Signature

Element

HTMLButtonElement

Blocks

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

Blocks marked with * are required.

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`
`@isExpanded`	Indicate if the icon button's disclosed content is expanded.	`boolean`	`false`
`@isLoading`	Indicate if the icon button should render 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"`

Arguments marked with * are required.