# `PhoenixStorybook.Stories.Variation`
[🔗](https://github.com/phenixdigital/phoenix_storybook/blob/v1.2.0/lib/phoenix_storybook/stories/variation.ex#L1)

A variation captures the rendered state of a UI component. Developers write multiple variations
per component that describe all the “interesting” states a component can support.

Each variation will be displayed in the storybook as a code snippet alongside with the
component preview.

Variations attributes type are checked against their matching attribute (if any) and will raise
a compilation an error in case of mismatch.

Advanced component & variation documentation is available in the
[components guide](guides/components.md).

## Usage
```elixir
  def variations do
    [
      %Variation{
        id: :default,
        description: "Default dropdown",
        note: "This variation shows the most common use case.",
        attributes: %{
          label: "A dropdown",
        },
        slots: [
          ~s|<:entry path="#" label="Account settings"/>|,
          ~s|<:entry path="#" label="Support"/>|,
          ~s|<:entry path="#" label="License"/>|
        ]
      }
    ]
  end
```

# `t`

```elixir
@type t() :: %PhoenixStorybook.Stories.Variation{
  attributes: map(),
  description: String.t() | nil,
  id: atom(),
  let: atom() | nil,
  note: String.t() | nil,
  slots: [String.t()],
  template: :unset | String.t() | nil | false
}
```

---

*Consult [api-reference.md](api-reference.md) for complete listing*